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