Angular2：如何在HTML组件中循环遍历TypeScript字典

Question

我正在开发一个Angular 2应用程序，我想要循环遍历Typescript字典并显示其数据。

我想要展示的接口是：

export interface IProductionOrderDetail {
    productionOrderName: string;
    productCode: string;
    batches: IBatch[];
    levels: IAggLevel[];
    variableData: IVarData[];
    codeStatistics: ICodeStatistics;
}

export interface ICodeStatistics {
    [index: number]: {
        commissionedCodes: number;
        decommissionedCodes: number;
        aggregatedCodes: number;
    }
}

我知道在TypeScript中可以使用循环字典：

for (let key in myDictionary) {
    let value = myDictionary[key];
    // Use `key` and `value`
}

所以，我决定在html组件中使用它：

<div class="row" *ngFor="let key in prodetail.codeStatistics">
    <div class="col-md-1">{{queryLevelName(key)}}</div>
    <div class="col-md-1">{{prodetail.codeStatistics[key].commissionedCodes}}</div>
    <div class="col-md-1">{{prodetail.codeStatistics[key].decommissionedCodes}}</div>
    <div class="col-md-1">{{prodetail.codeStatistics[key].aggregatedCodes}}</div>
</div>

但是似乎在*ngFor="let key in prodetail.codeStatistics"中的in出了问题，因为我收到了以下错误：

无法绑定到 'ngForIn'，因为它不是 'div' 的已知属性。(“ ]*ngFor="let key in prodetail.codeStatistics">

我该如何循环遍历字典？

- VansFannel

Answer 1

在最新版本的Angular（6.0.0+）中：发现了最佳解决方案，Angular本身提供了可以循环遍历JSON的管道，即其keyvalue管道。

<div *ngFor='let item of jsonObj | keyvalue'>
   Key: {{item.key}}

    <div *ngFor='let obj of item.value'>
        {{ obj.title }}
        {{ obj.desc }}
    </div>

</div>

演示链接

---

之前的做法：

由于Angular模板不支持从模板端循环遍历json对象，也没有ngForIn指令，

您只能通过*ngForOf循环数组来遍历数据，但如果要循环遍历json或字典，可以这样做

组件端：

objectKeys = Object.keys;

模板侧：

<div class="row" *ngFor="let key of objectKeys(prodetail.codeStatistics)">
    <div class="col-md-1">{{queryLevelName(key)}}</div>
    <div class="col-md-1">{{prodetail.codeStatistics[key].commissionedCodes}}</div>
    <div class="col-md-1">{{prodetail.codeStatistics[key].decommissionedCodes}}</div>
    <div class="col-md-1">{{prodetail.codeStatistics[key].aggregatedCodes}}</div>
</div>

WORKING DEMO

- Vivek Doshi