Trying to display data in table from an array in Angular

Question

I have some code in Angular 6 to display data, but the code I have tried to implement does not work? My code so far:

TS file

  incident = [ 
    {id: 'E200', product: 'MP2355 Black and white', floor: '2', address: '11 Rue', code: '75019'},
  ];

  incidents = this.incident[0];

HTML file

<tr class="" *ngFor="let state of incidents">
    <td>{{state.id}}</td>
</tr>

id doesn't appear to be a property on your incidents object. — Woohoojin
– Woohoojin, Commented Feb 27, 2019 at 17:40
incidents = this.incident[0]; I don't get this, or the rest of the example. There is no id key in your sample data. Please update your question. — msanford
– msanford, Commented Feb 27, 2019 at 17:40

mepraveenk · Accepted Answer · 2019-02-27 17:45:27Z

2

incidents = this.incident[0];

You are taking only one object from array so it can't iterate the loop in view.

this.incidents=this.incident;
<tr *ngFor= "let incident of incidents">
<td>{{ incident.id }} </td>
..
..
</tr>

answered Feb 27, 2019 at 17:45

mepraveenk

2461 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sajeetharan · Accepted Answer · 2019-02-27 17:38:12Z

0

Should not that be just incident instead of incidents?

<tr class="" *ngFor="let state of incident">
    <td>{{state.id}}</td>
</tr>

answered Feb 27, 2019 at 17:38

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Collectives™ on Stack Overflow

Trying to display data in table from an array in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related