CODEWITHSUNDEEP
angularasynchronousangular6ngforangular-ngfor
Joseph
Joseph

Reputation: 7755

Display Table Rows Using Async in Angular

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>

Upvotes: 0

Views: 2003

Answers (2)

Ashish Ranjan
Ashish Ranjan

Reputation: 12960

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.

Upvotes: 1

Buczkowski
Buczkowski

Reputation: 2416

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.

Upvotes: 0

Related Questions