Angular：如何获取模板的异步数据

Question

我有以下问题：

我想制作一个包含条目（Obj）的表格。其中一些具有文件属性。 如果他们有文件属性（entry.file），我想进行后端调用以获取该文件的 url：

public getFileURL(archiveID: string, documentID: string, sysID: string){
    const request: FileRequest = {
      archiveID: archiveID,
      documentID: documentID,
      sysID: sysID
    };
    this.fileService.file(request).subscribe(response => {
      if (response) {
        return response;
      }
    })
}

这被称为：getFileURL(entry.file.archiveID, entry.file.documentID, entry.file.sysID) 它应该返回一个 Observable，所以我可以检查我是否得到了后端响应。

<tr *ngFor="let entry of period.claims; let i = index">
...
<td>
  <div *ngIf="entry.file">
    <div *ngIf="fileClientService.getFileURL(entry.file.archiveID, entry.file.documentID, entry.file.sysID) | async as file; else loading">
      <a target="about:blank" class="download" (click)="clickLink(file)"></a>
    </div>
    <ng-template #loading let-file>loading..</ng-template>
  </div>
</td>

我想要的只是显示“正在加载”，直到加载 url，然后显示 a-tag。 此外，从后端返回的 url 参数可能为空。因此，如果 url 为空（“”），我也不需要显示任何内容。 目前，它会触发数百个后端调用，调用 2 个具有 entry.file 属性的对象:(

我对 Observables 不太擅长，我希望有人可以帮助我。 到目前为止谢谢你:)

Answer 1

您需要直接从您的方法中返回 Observable 并将您的 period.claims 映射到一个 Observable：

// add proper type
entries: Observable<...> = getEntries();

getEntries() {
  // we map every claim to Observable returned from getFileURL method
  const entries = period.claims.map(entry => 
    getFileURL(...).pipe(
      // we use map to return whole entry from Observable - not only url
      map(url => ({
        ...entry,
        url,
      }))
  ));
  // forkJoin will return one Observable with value array when each Observable is completed
  return forkJoin(...entries);
}

public getFileURL(archiveID: string, documentID: string, sysID: string): Observable<...> {
    const request: FileRequest = {
      archiveID: archiveID,
      documentID: documentID,
      sysID: sysID
    };
    return this.fileService.file(request).pipe(filter(Boolean));
}

如果您不想传递给模板空响应，您可以使用 filter 运算符并将布尔值作为回调传递。它只会返回真实值。您可以阅读更多相关信息：https://www.learnrxjs.io/learn-rxjs/operators/filtering/filter 您还可以阅读有关forkJoin 的更多信息：https://www.learnrxjs.io/learn-rxjs/operators/combination/forkjoin

请注意，为方法添加正确的类型会告诉你你做错了什么；）