在ngIf中加载API中的URL,并再次使用该值。

所以我希望我可以解释的很好,它足够。

我有一个API Call,我用id调用它,它给了我一个downloadURL.目前我在我的服务中用这个作为承诺。

目前我在我的服务中用这个作为承诺:在fileClientService中。

public async getFile(aID: string, dID: string, sID: string){
    const request: FileRequest = {
      aID: aID,
      dID: dID,
      sID: sID
    };
    return new Promise((resolve, reject) => {
      this.fileService.file(request).subscribe(response => {
        if (response) {
          resolve(response);
        }
      });
    })
  }

在Controler中我有两个函数:

Controler.Currently I used this as Promise in my Service: In fileClientService: And in the Controler I have 2 Functions: Controler:

  async getDownloadURL(file: FileInfo){
    return await this.fileClientService.getFileTest(file.aID, file.dID, file.sID)
  }

  clickLink(file: FileResponse){
    window.open(file.url)
  }

在模板中,我试图加载Table Rows,并希望检查是否给了donwloadURL,它不是空的(因为BE可以给空字符串回来:D)。

模板。

<!-- somewhere above: -->
*ngFor="let entry of period.claims; let i = index"

...

<td>
   <div *ngIf="entry.file">
      <div *ngIf="getDownloadURL(entry.file) | async as file">
         <div *ngIf="file.url !== ''">
            <a target="about:blank" class="download" (click)="clickLink(file)"></a>
         </div>
      </div>
   </div>
</td>

所以我想做的是:我想检查索赔是否有一个条目(*ngIf=”entry.file”)如果它有一个,那么我想得到URL(这可能需要时间),当我得到它之后,我想检查它是否是一个空字符串(“”),然后它应该显示带有URL的超链接。

我不想做一个数组,我在init时加载了一些key和url。对我来说,最好的结果是得到每行的url,而不必把它保存在controler中(像ngIf中的 “as file”)。

目前它无限次调用getDownloadURL。

我打赌有更好的方法。肯定是用一个Observable或者其他什么东西,我希望你们能帮助我 🙂

更新一下。

所以现在我把它改成了这个样子。

服务:

getFile(aID: string, dID: string, sID: string){
    const request: FileRequest = {
      aID: aID,
      dID: dID,
      sID: sID
    };
    return this.fileService.file(request).pipe(
      filter(file => file.url.trim() !== '')
   )
  }

Controller:

getDownloadURL(file: FileInfo){
  return this.fileClientService.getFile(file.archiveID, file.documentID, file.sysID)
  }
clickLink(file: FileResponse){
  window.open(file.url)
}

模板。

<div *ngIf="getDownloadURL(entry.file) | async as file; else loading">
   <a target="about:blank" class="download" (click)="clickLink(file)"></a>
</div>
<ng-template #loading>loading..</ng-template>

我在调试时添加了加载部分。

解决方案:

首先,我将简化 getFile 并使其返回一个 Observable 对非空值进行过滤,像这样

public getFile(aID: string, dID: string, sID: string){
    const request: FileRequest = {
      aID: aID,
      dID: dID,
      sID: sID
    };
    // assume this.fileService.file returns and Observable
    return this.fileService.file(request).pipe(
       filter(file => file.trim() != '')
    ) 
  }

有了这个版本的 getFile 方法,你应该可以像这样简化模板。

<td>
      <div *ngIf="getDownloadURL(entry.file) | async as file">
            <a target="about:blank" class="download" (click)="clickLink(file)"></a>
      </div>
</td>

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何让导航栏按钮与导航栏标题在同一行?

2022-9-9 4:02:17

未分类

在laravel 7中,当登录成功时显示一个甜蜜的提示框。

2022-9-9 4:02:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索