我正在尝试显示 vendor 数组的对象名称,但我很困惑,因为它在一个数组中。我正在显示数组,我还想显示第二个数组的对象名称。但问题出在第二个阵列上。 supplier.name 是我想显示的。图片如下
[图片在这里][1]
ts
getAllMaterials() {
this.subscription = this.materialsService.getAll()
.subscribe(
(data:any) => {
this.materials = data.materials;
let suppliers = data.materials[0].suppliers;
console.log(data);
console.log(suppliers);
},
error => {
alert("Error");
console.log(error);
});
}
html
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>display on this td</td>
<td>{{ material.price }}</td>
<td>
</tr>
最佳答案
所以你可以做两件事:
解决方案1:如果您在 vendor 中只有一条记录
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>{{material.suppliers[0].name}}</td>
<td>{{ material.price }}</td>
<td>
</tr>
解决方案 2:
如果你想在同一个 td 中显示多个名字:
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td><span *ngFor ="let s of material.suppliers"> {{s.name}}
</span>
</td>
<td>{{ material.price }}</td>
<td>
</tr>
关于javascript - 在 Angular 中显示数组内部的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46679102/