Angular中的数组内显示对象

Question

我想显示供应商数组的对象名称，但我很困惑，因为它内部的数组。我显示数组，也是我想显示第二个数组的对象名称。但问题出在第二个数组上。 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> 

Answer 1

所以，你可以做两件事：

解决方案1：如果你只有在供应商单个记录

<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>