Отображение строк таблицы с использованием асинхронного в угловом

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

Во втором примере вы пытаетесь получить доступ к max_temp свойству результатов $ (которое, вероятно, можно наблюдать, это return Array), и у него нет этого свойства.Первый пример работает, потому что вы просто получаете доступ к этому свойству в реальном элементе (через итерацию) этого массива.

Answer 2

У меня есть два решения, которые я могу предложить. Вы можете использовать любой из них.

Решение 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 ng-контейнер - это группирующий элемент, который не мешает стилям или макету, поскольку Angular не помещает его в DOM.