使用 *ngFor 循環在表中顯示嵌套的 object angular 10

Question

我嵌套了 JSON 個對象。 我想顯示嵌套數據和主要項目，但它沒有顯示值。

代碼

  productAttributeItems: any[] = [];

    getProductAttributeItems() {
     this.productAttributeItems = this.productAttributeItems.filter(b => b.ProductId == 5);

     this.productService.getProductAttributesItems(5).subscribe(x => {
      Object.assign(this.productAttributeItems, x);
      console.log(x);
    });
  } 

Html

  <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>Attribute Name</th>
                      <th>Name</th>
                      <th>Price</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let attItems of productAttributeItems">
                      <td>{{ attItems.Name }}</td>
                      <td>{{ attItems.ProductAttributeItems?.MasterProductAttributeItem?.Name }}</td>
                      <td style="width: 40%; white-space: nowrap">{{ attItems.ProductAttributeItems.PriceAdjustment }}</td>
                    </tr>
                  </tbody>
</table> 

JSON 數據鏈

Answer 1

您可以使用控制台日志深入了解 productAttributeItems 的可視化結構

這是我試圖重現你的 JSON object 結構。

<table class="table table-hover">
  <thead>
    <tr>
      <th>Attribute Name</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let attItems of productAttributeItems.ProductAttributeItems">
      <td>{{ attItems?.MasterProductAttributeItem?.Name }}</td>
      <td>
        {{ productAttributeItems?.Name }}
      </td>
      <td style="width: 40%; white-space: nowrap">
        {{ attItems.PriceAdjustment }}
      </td>
    </tr>
  </tbody>
</table>

鏈接演示https://stackblitz.com/edit/angular-ivy-zh9spo