Display Table Rows Using Async in Angular

Question

I need to display the result of the JSON response in a table. I already figure it out using this below

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

But i wanna do something like this below and its not working. Can anyone help me out on how to fix this?

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

Answer 1

I have these two solution which I can suggest. You can use any of them.

Solution 1:

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

Solution 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>

Please note, from the 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

In second example you try to access max_temp property of results$ (which is probably observable that's return Array) and it doesn't have that property. First example works because you simply access that property on actual item (through iteration) of that Array.