how to display the array inside an array of objects using ngFor Angular 2
14,666
We can simply iterate the loop inside by modifying the second loop
<tr *ngFor="let item of people">
<td>{{item.Name}}</td>
<td *ngFor="let quality of item.quality">{{ quality }}</td>
<td *ngFor="let quality2 of item.quality2">{{quality2}}</td>
</tr>
Related videos on Youtube
Author by
user3797088
Updated on May 25, 2022Comments
-
user3797088 almost 2 years
I need to display the array quality which is located inside an array of objects. I have tried calling it in
ngFor
using the code below. Is there something wrong with my usage ofngFor
?import { Component} from '@angular/core'; @Component({ selector: 'my-app', template: `<table> <thead> <tr> <th>Name</th> <th>Quality1</th> <th>Quality2</th> </tr> </thead> <tbody> <tr *ngFor"let item of people"> <td>{{item.Name}}</td> <td *ngFor"let item of people.quality">item.quality1</td> <td *ngFor"let item of people.quality">item.quality2/td> </tr> </tbody> </table> }) export class AppComponent{ people: any = [{Name:"John", quality:[{quality1: "nice", quality2: "humble"}]}, {Name:"Dave", quality:[{quality1: "kind", quality2: "caring"}]} ]; }
As of now only the names are appearing in the table but I would also like the quality to appear.
-
jonrsharpe over 7 yearsWhat are the second and third loops supposed to be doing? Will every person have two qualities? Why are the qualities in a map? Why use
i
as the name of each person in the loop? You're missing a closing backtick too. -
user3797088 over 7 years@jonrsharpe the second and third loop are going to display the the quality of a person, I use "let item of people" and "let item of people quality" in my real code this is just a shortcut
-
user3797088 over 7 years@jonrsharpe is there a way to display my array using ngFor?
-
jonrsharpe over 7 yearsThe second loop should be over
i.quality
, but your data model seems very weird and you're going to end up with an odd-looking table. Please show a minimal reproducible example of real code, rewriting it badly is not helpful.
-