Angular2：HTML型のループ型スクリプト辞書

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; 
    } 
} 

：だから

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"で10私は、次のエラーが出るので：？

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

をどのように辞書を超えるIループjsonObjectは、テンプレート側からループと全くngForInディレクティブはまだありませんサポートしていないような角度

Answer 1

、

あなたがデータをループのみ* 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