Загрузка URL из API в ngIf и использование значения снова

Question

Итак, я надеюсь, что смогу объяснить это достаточно хорошо:

У меня есть вызов API, который я вызываю с помощью идентификаторов, и он дает мне 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);
        }
      });
    })
  }

И в контроллере у меня есть 2 функции:

Контроллер:

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

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

И в шаблоне я пытаюсь загрузить строки таблицы и хочу проверить, задан ли 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 с помощью ключа и URL. Лучший результат для меня - получить URL для каждой строки без необходимости сохранять его в контроллере (например, «как файл» в ngIf)

В данный момент он вызывает 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() !== '')
   )
  }

Контроллер:

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>

Я добавил загрузочную часть при отладке.

Answer 1

Прежде всего, я бы упростил 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>