0

I have a data collection as below and I need to print these information on a HTML page using the ngFor loop.

[
  {_id: "5ed387946094abebeaa6e75a", name: "Andaman and Nicobar Islands", active: 0, cured: 33, death: 0},
  {_id: "5ed387946094abebeaa6e75b", name: "Andhra Pradesh", active: 1654, cured: 2576, death: 73},
  {_id: "5ed387956094abebeaa6e75c", name: "Arunachal Pradesh", active: 44, cured: 1, death: 0},
  {_id: "5ed387966094abebeaa6e75d", name: "Assam", active: 1651, cured: 498, death: 4},
  {_id: "5ed387966094abebeaa6e75e", name: "Bihar", active: 2342, cured: 2225, death: 29},
  {_id: "5ed387966094abebeaa6e75f", name: "Chandigarh", active: 77, cured: 222, death: 5},
  {_id: "5ed387976094abebeaa6e760", name: "Chhattisgarh", active: 633, cured: 244, death: 2}
]
mapmalith
  • 1,303
  • 21
  • 38
Abir
  • 1
  • 1

1 Answers1

0

Option 1: json pipe

<ng-container *ngFor="let item of state">
  {{ item | json }}
</ng-container>

Option 2: keyvalue pipe

<ng-container *ngFor="let item of state">
  <ng-container *ngFor="let property of item | keyvalue">
    {{ property.key }}: {{ property.value }}
  </ng-container>
</ng-container>

Option 3: Access properties directly

<ng-container *ngFor="let item of state">
  {{ item?.name }}
  {{ item?.active }}
  {{ item?.cured }}
  {{ item?.death }}
  ...
</ng-container>
Community
  • 1
  • 1
ruth
  • 29,535
  • 4
  • 30
  • 57
  • No pipe found with name 'json'. – Abir Jun 08 '20 at 09:48
  • If Angular < V9 see here: https://stackoverflow.com/q/40389309/6513921. If Angular > V9 see here: https://github.com/angular/angular/issues/26436#issuecomment-455841125 – ruth Jun 08 '20 at 09:50
  • core.js:12565 Can't bind to 'ngForOf' since it isn't a known property of 'ng-container'. – Abir Jun 08 '20 at 09:54
  • See here: https://stackoverflow.com/a/40331563/6513921. The modules need to be imported in your module where the component resides. – ruth Jun 08 '20 at 09:56
  • 1
    You need to show more details. The structure of the app and the module file. Without it it's becomes a guesswork. – ruth Jun 08 '20 at 10:01