如何使用ngFor Angular 2在對象數組中顯示數組

Question

我需要顯示位於對象數組中的數組質量。 我嘗試使用下面的代碼在ngFor調用它。 我使用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"}]} ];
  }

截至目前，只有名字出現在表格中，但我也希望質量出現。

Answer 1

我們可以通過修改第二個循環來簡單地迭代循環內部

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

Answer 2

您可以使用<ng-container>將多個節點與*ngFor而不會向DOM引入另一個元素：

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

Answer 3

如果我理解你，你也可以這樣綁定：

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