Afficher l'objet à l'intérieur du tableau à l'intérieur Angular

Question

J'essaie d'afficher le nom de l'objet d'un tableau de fournisseurs, mais je suis confus parce que c'est dans un tableau. Je suis l'affichage du tableau et je veux aussi afficher le nom de l'objet du second tableau. Mais le problème est sur le second tableau. Le nom du fournisseur est que je veux l'afficher. Le pic est inférieur

[IMAGE EST ICI] [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

Vous pouvez faire deux choses :

Solution 1: Si vous avez seulement seul enregistrement des fournisseurs

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

Solution 2:

Si vous voulez afficher les noms multiples dans la même 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>