Question

我需要在表中显示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：

Angular ng-container是一个分组元素，它不会干扰样式或布局，因为Angular不会将其放置在DOM中。

Answer 2

在第二个示例中，您尝试访问results $的max_temp属性（可以观察到返回Array），并且不具有该属性。第一个示例之所以有效，是因为您只需通过迭代访问该属性即可（通过迭代）。

在Angular中使用异步显示表行

2 个答案: