Display object inside of array inside Angular

Question

I'm trying to display the object name of a the suppliers array but i'm confused because its inside an array. I'm display the array and also i want to display the object name of the second array. But the problem is on the second array. The supplier.name is i want to display it. The pic is below

[PICTURE IS HERE][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 you can do two things :

Solution 1 : If you have only single record in suppliers

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

If you want to show multiple names in same 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>