在 Angular 中使用异步显示表格行答案

【问题标题】：Display Table Rows Using Async in Angular在 Angular 中使用异步显示表格行
【发布时间】：2019-04-30 09:30:18
【问题描述】：

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

【问题讨论】：

max_temp 是可迭代的吗？
请更新 max_temp 值
@Buczkowski。上面的第一个代码正在工作。我想做第二个代码之类的事情
@Joseph 是的，我知道，你想迭代 max_temp 这就是为什么我问它是否可迭代，例如。数组？
@Buczkowski。是的

标签： angular asynchronous angular6 ngfor angular-ngfor

【解决方案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。

【讨论】：

我只需要一个 tr。谢谢
@Joseph 没听懂？只有一个tr？他们为什么要循环？你是说你不想要ng-container？

【解决方案2】：

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

【讨论】：

那么解决办法是什么？
@Joseph 取决于您希望如何显示来自max_temp 的值。单个td?中以逗号分隔的值