typescript 如何使用 ngFor Angular 2 在对象数组中显示数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40759703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to display the array inside an array of objects using ngFor Angular 2
提问by user3797088
I need to display the array quality which is located inside an array of objects. I have tried calling it in ngForusing the code below. Is there something wrong with my usage of ngFor?
我需要显示位于对象数组内的数组质量。我尝试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"}]} ];
}
As of now only the names are appearing in the table but I would also like the quality to appear.
截至目前，表中仅显示名称，但我也希望显示质量。
回答by Anoop P S
We can simply iterate the loop inside by modifying the second loop
我们可以通过修改第二个循环来简单地迭代内部循环
<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>
回答by Günter Z?chbauer
You can use <ng-container>to combine several nodes with *ngForwithout introducing another element to the DOM:
您可以使用<ng-container>组合多个节点*ngFor而不向 DOM 引入另一个元素：
<ng-container *ngFor"let item of people.quality">
<td>item.quality1</td>
<td>item.quality2/td>
</ng-container>
回答by Emile Cantero
If I understand you well you could also bind like that:
如果我理解你，你也可以这样绑定：
<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>
