Wie tief verschachtelte Array Javascript Eckige zu bekommen?

Wie erhalte ich dieses Array und zeigen Produktnamen? Das ist mein verschachtelter Objekt-Array. Bild Schauen Sie ich weiß nicht, wie product.name in meiner Antwort zu teilen. Habe ich mit ngFor tun oder ich muss innerhalb ts-Datei filtern?

https://imge.to/i/vkq8eH

Schauen Sie meinen Code:

  getProducts() {
    this.product.getLastPurchase().subscribe((data: any) => {
     this.lastPurchase = data;
     this.lastProduct = data.items;
     this.productName = data.items;
    //  this.onlyProduct = data.items;
     this.productName.map(e => this.nameOfProductForShare = e.product);
    //  this.nameOfProductForShare.map(e => console.log("E" , e));
    this.productName.forEach(element => {
      console.log(this.onlyProduct =  element.product.name)
    });
    });
  }

Vorlage:

    <div  *ngFor="let item of lastPurchase.items">
      <div   >
      <div class="row">
        <span>Proizvod: </span>
      </div>
      <div>
        <div class="row">
            <mat-form-field class="example-full-width" style="display:none">
                <input
                 matInput
                 placeholder="Proizvod"
                 name="id"
                 [(ngModel)]="item.id"
                 >
              </mat-form-field>
              <mat-form-field class="example-full-width">
                  <input
                   matInput
                   placeholder="Proizvod"
                   name="item.name"
                   [(ngModel)]="item.product.name"
                   >
                </mat-form-field>
        </div>
        <div class="row">
          <mat-form-field class="example-full-width">
            <input
             placeholder="kg/kom/pak"
             name="quantity"
             [(ngModel)]="item.quantity"
             >
          </mat-form-field>
        </div>
      </div>
      <div class="row">
        <hr class="style-hr-custom">
      </div>
    </div>
  </div>