在 Angular 中使用异步显示 Table 行

Question

我需要在 table 中显示 JSON 响应的结果。我已经用下面的这个弄明白了

<tr *ngFor="let result of results$ | async">
    <td>{{result.max_temp}}</td>
</tr>

但是我想在下面做类似的事情，但它不起作用。谁能帮我解决这个问题？

<tr *ngFor="let result of (results$ | async)?.max_temp">
    <td>{{result}}</td>
</tr>

Answer 1

我有这两个可以建议的解决方案。您可以使用其中任何一个。

解决方案 1：

<ng-container *ngIf="results$ | async as resolvedResult">
  <tr *ngFor="let result of resolvedResult.max_temp">
    <td>{{result}}</td>
  </tr>
</ng-container>

解决方案 2：

<ng-container
    *ngTemplateOutlet="asyncTemplate;context:{resolvedResult: results$ | async}">
</ng-container>

<ng-template #asyncTemplate let-resolvedResult="resolvedResult">
  <tr *ngFor="let result of resolvedResult.max_temp">
    <td>{{result}}</td>
  </tr>
</ng-template>

请注意，来自 Angular docs：

The Angular ng-container is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

Answer 2

在第二个示例中，您尝试访问 max_temp 属性的结果 $（这可能是可观察到的 return 数组）并且它没有属性 . 第一个示例有效，因为您只需访问该数组的实际项目（通过迭代）上的属性。

在 Angular 中使用异步显示 Table 行

Display Table Rows Using Async in Angular

angular

asynchronous

angular6

ngfor

angular-ngfor