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

发布时间：2020-12-17 18:05:39 所属栏目：安全来源：网络整理

导读：我需要显示位于对象数组中的数组质量.我尝试使用下面的代码在ngFor中调用它.我使用ngFor有什么问题吗？ import { Component} from '@angular/core';@Component({ selector: 'my-app',template: `table thead tr thName/th thQuality1/th thQuality2/th /tr /

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

截至目前,只有名字出现在表格中,但我也希望质量出现.

解决方法

您可以使用< ng-container>将几个节点与* ngFor组合而不向DOM引入另一个元素：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!