Display-Objekt innerhalb des Array innerhalb Angular

Question

Ich versuche, den Objektnamen eines Lieferanten-Array anzuzeigen, aber ich bin verwirrt, weil es in einem Array ist. Ich zeige das Array an und möchte auch den Objektnamen des zweiten Arrays anzeigen. Aber das Problem ist auf dem zweiten Array. Der Lieferant.name ist ich möchte es anzeigen. Das Bild ist unter

[BILD IST HIER] [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

So kann man zwei Dinge tun :

Lösung 1: Wenn Sie nur einzelne Datensatz in Lieferanten

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

Lösung 2:

Wenn Sie mehrere Namen in derselben td zeigen wollen:

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