如何使用 ngFor Angular 2 在对象数组中显示数组答案

【问题标题】：how to display the array inside an array of objects using ngFor Angular 2如何使用 ngFor Angular 2 在对象数组中显示数组
【发布时间】：2017-04-07 04:21:33
【问题描述】：

我需要显示位于对象数组内的数组质量。我尝试使用下面的代码在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"}]} ];
  }

到目前为止，表格中只显示了名称，但我也希望显示质量。

【问题讨论】：

第二个和第三个循环应该做什么？每个人都会有两种品质吗？为什么地图中有质量？为什么使用i 作为循环中每个人的名字？你也错过了一个结束的反引号。
@jonrsharpe 第二个和第三个循环将显示一个人的质量，我在我的真实代码中使用“let item of people”和“let item of people quality”这只是一个快捷方式
@jonrsharpe 有没有办法使用 ngFor 显示我的数组？
第二个循环应该结束i.quality，但是你的数据模型看起来很奇怪，你最终会得到一个看起来很奇怪的表格。请出示minimal reproducible example的真实代码，重写不好没有帮助。

标签： arrays angular typescript ngfor

【解决方案1】：

您可以使用<ng-container> 将多个节点与*ngFor 组合在一起，而无需向 DOM 引入另一个元素：

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

【讨论】：

【解决方案2】：

如果我理解你，你也可以这样绑定：

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

【讨论】：

【解决方案3】：

我们可以通过修改第二个循环来简单地迭代里面的循环

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

【讨论】：