Angular2：html组件中的循环打字稿字典答案

【问题标题】：Angular2: loop typescript dictionary in html componentAngular2：html组件中的循环打字稿字典
【发布时间】：2026-01-04 11:00:01
【问题描述】：

我正在开发一个 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="让键入 prodetail.codeStatistics">

我怎样才能遍历字典？a

【问题讨论】：

标签： angular typescript dictionary

【解决方案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>

WORKIGN DEMO

以前：

由于 Angular 不支持从模板端循环 jsonObject 并且还没有 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

【讨论】：