在 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

所以你可以做两件事:

解决方案一：如果你在供应商中只有一条记录

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

在 Angular 内的数组内显示对象

Display object inside of array inside Angular

javascript

arrays

ngfor

angular