我需要显示其位于对象的数组内的阵列的品质。我曾尝试使用下面的代码调用它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>
不引入一个新元素的DOM与*ngFor
几个节点相结合:
<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>