Angular 2 : loop typescript dictionary in html component

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 似乎有问题，因为我收到以下错误:

Can't bind to 'ngForIn' since it isn't a known property of 'div'. (" ]*ngFor="let key in prodetail.codeStatistics">

如何遍历字典？a

Answer 1

在最新版本的 Angular (6.0.0+) 中:很高兴从 Angular 中找到最佳解决方案，它本身提供了循环遍历 JSON 及其 keyvalue 的管道/p>

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

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

</div>

WORKIGN DEMO

---

以前:

由于 angular 不支持从模板端循环 jsonObject 并且还没有 ngForIn 指令，

只有当它的数组带有 *ngForOf 时，你才可以循环遍历数据，但是如果你想循环遍历 json 或字典，你可以这样做

Component side :

objectKeys = Object.keys;

Template side :

<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