Angular 2 kullanarak ngFor ile nesneler dizisi içindeki diziyi nasıl gösterebiliriz

Nesnelerden oluşan bir dizinin içinde bulunan 'quality' dizisini görüntülemem gerekiyor. Aşağıdaki kodu kullanarak ngFor ile çağırmayı denedim. ngFor kullanımımda bir yanlışlık var mı?

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"}]} ];
  }

Şu anda tabloda sadece isimler görünmekte, ancak ben kalite bilgisinin de görünmesini istiyorum.

Cevap #1

İkinci döngüyü değiştirerek içteki döngüyü basitçe yineleyebiliriz

        <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>

Cevap #2

<ng-container>'ı, DOM'a başka bir öğe eklemeden birkaç düğümü *ngFor ile birleştirmek için kullanabilirsiniz:

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

İlgili makaleler