如何訪問 angular 模板中的對象屬性名稱？

Question

我想使用 angular 插值綁定嵌套對象屬性名稱

 <ng-container ngFor="let item of saleDetailsAggegater.productMap | keyvalue">
                            <tr *ngFor="let qtyMap of item.value | keyvalue">
                              <td>{{ item.key }}</td>
                              <td>{{qtyMap.value}}</td>
                              <td>{{Object.keys(qtyMap)[0]}}</td>
                            </tr>
                        </ng-container>

我的saledetailsAggegater object如下

{"productMap":{"55478":{"priceQuantityMap":{"200.00":10}}},"taxMap":{},"paymentMap":{"1":970},"total":970}

但是這條線沒有按預期工作

<td>{{Object.keys(qtyMap)[0]}}</td>

我怎樣才能做到這一點？

Answer 1

我認為您不能在模板中使用本機 javascript 函數（angular 不會解析它們）。 但是，您可以在組件上定義 function，然后在模板中使用它：

@Component({
  template: '<td>{{objectKeys(myObj)[0]}}</td>'
})
export class MyComponent {
  objectKeys = Object.keys;

  myObj = { displayThisKey: 'some-value' };
}

Answer 2

首先，您的第一個ngFor中有錯字，您忘記輸入* 。
您可以通過執行以下操作來實現您想要的：

<ng-container *ngFor="let item of saleDetailsAggegater.productMap | keyvalue">
    <tr *ngFor="let qtyMap of item.value | keyvalue">
        <td>{{ item.key }}</td>
        <td>{{qtyMap.value | json}}</td>
        <td>{{qtyMap.key | json}}</td>
        <td>{{(qtyMap.value | keyvalue | json)}}</td>
    <td *ngFor="let qty of (qtyMap.value | keyvalue);">
      {{qty.key}}
    </td>
    </tr>
</ng-container>

我刪除了 {{Object.keys(qtyMap)[0]}} 並添加了 json pipe 只是為了確保 object 具有您想要的值。 我還添加了多種可能性供您選擇。
這是一個現場演示： 鏈接