![](/img/trans.png)
[英]ngFor inside ngFor to display the array inside an array of objects Angular 4
[英]how to display the array inside an array of objects using ngFor Angular 2
我需要显示位于对象数组中的数组质量。 我尝试使用下面的代码在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"}]} ];
}
截至目前,只有名字出现在表格中,但我也希望质量出现。
我们可以通过修改第二个循环来简单地迭代循环内部
<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>
您可以使用<ng-container>
将多个节点与*ngFor
而不会向DOM引入另一个元素:
<ng-container *ngFor"let item of people.quality">
<td>item.quality1</td>
<td>item.quality2/td>
</ng-container>
如果我理解你,你也可以这样绑定:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.