为什么当我调用 api 时我的代码会无限循环？

Question

我正在尝试调用我的 api 来获取 tp 的名称，但在视图中我只看到 [object promise] 并且在浏览器控制台中它看起来像是在进行无限循环

html:

<table [dtOptions]="dtOptions" class="row-border hover" datatable>
  <thead>
  <tr>
    <th>Date</th>
    <th>Intitulé</th>
    <th>Résultat</th>
    <th>Coefficiant</th>
  </tr>
  </thead>
  <tbody *ngIf="grades?.length != 0">
  <tr *ngFor="let grade of grades">
    <td>{{ formatDate(grade.Date) | date : 'MM/dd/yyyy hh:mm'}}</td>
    <td>{{ getTpName(grade.tp_id) }}</td>
    <td><b>{{ grade.Grade | number:'2.1-2' }}/20</b></td>
    <td>{{ grade.coeff | number:'1.1'}}</td>
  </tr>
  </tbody>
  <tbody *ngIf="grades?.length == 0">
  <tr>
    <td class="no-data-available" colspan="4">Aucune note enregistées</td>
  </tr>
  <tbody>
</table>

TS：

  async getTpName(tp_id: any) {
    return  await this.apiService.getTpName(tp_id);
  }

apiservice>getTpName

  getTpName(tp_id) {
    let url = `${this._tpUrl}/readName/${tp_id}`;
    return new Promise((resolve, reject) => {
      this.http.get(url, {headers: this.headers}).subscribe(
        res => resolve(res),
        error => reject(error)
      )
    });
  }

你知道为什么会发生这种情况以及如何纠正吗？

编辑：

Answer 1

将api调用从html移动到组件控制器会很好。

ngOnInit() {
   grades.forEach(grade => {
       this.getTpName(grade.tp_id)
           .pipe(take(1))
           .subscribe(tpName => {
                grade.tpName = tpName;
           });
   });
}

< td > {{ grade.tpName | json }}</td >