how to display the array inside an array of objects using ngFor Angular 2

Question

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 of ngFor?

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.

What 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. — jonrsharpe
– jonrsharpe, Commented Nov 23, 2016 at 8:55
@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
– user3797088, Commented Nov 23, 2016 at 9:03
The 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. — jonrsharpe
– jonrsharpe, Commented Nov 23, 2016 at 9:06

Anoop P S · Accepted Answer · 2019-01-03 01:34:52Z

2

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>

answered Jan 3, 2019 at 1:34

Anoop P S

7821 gold badge12 silver badges34 bronze badges

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

Comments

Günter Zöchbauer · Accepted Answer · 2016-11-23 12:19:34Z

0

You can use <ng-container> to combine several nodes with *ngFor without introducing another element to the DOM:

<ng-container *ngFor"let item of people.quality">
  <td>item.quality1</td>
  <td>item.quality2/td>
</ng-container>

answered Nov 23, 2016 at 12:19

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Comments

user3795373 · Accepted Answer · 2017-07-21 07:52:38Z

0

If I understand you well you could also bind like that:

                   <tr *ngFor="let item of people">
                     <td>{{item.Name}}</td>
                     <td *ngFor="let item of people.quality">{{item.quality.[quality1]}}</td>
                     <td *ngFor="let item of people.quality">{{item..quality.[quality2]}}</td>
                   </tr>

edited Jul 21, 2017 at 7:52

user3795373

132 silver badges6 bronze badges

answered May 11, 2017 at 8:44

Emile Cantero

2,0836 gold badges26 silver badges49 bronze badges

Collectives™ on Stack Overflow

how to display the array inside an array of objects using ngFor Angular 2

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related