title: Angular2: loop typescript dictionary in html component
body: <p>I'm developing an Angular 2 application and I want to loop a Typescript dictionary to show its data.</p>
  
  <p>The interface I want to show is:</p>
  
  <pre><code>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;
      }
  }
  </code></pre>
  
  <p>I know that I can do this in TypeScript to loop the dictionary:</p>
  
  <pre><code>for (let key in myDictionary) {
      let value = myDictionary[key];
      // Use `key` and `value`
  }
  </code></pre>
  
  <p>So, I have decided to use it in the same way in a html component:</p>
  
  <pre><code>&lt;div class="row" *ngFor="let key in prodetail.codeStatistics"&gt;
      &lt;div class="col-md-1"&gt;{{queryLevelName(key)}}&lt;/div&gt;
      &lt;div class="col-md-1"&gt;{{prodetail.codeStatistics[key].commissionedCodes}}&lt;/div&gt;
      &lt;div class="col-md-1"&gt;{{prodetail.codeStatistics[key].decommissionedCodes}}&lt;/div&gt;
      &lt;div class="col-md-1"&gt;{{prodetail.codeStatistics[key].aggregatedCodes}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it seems that there is something wrong with the <code>in</code> in <code>*ngFor="let key in prodetail.codeStatistics"</code> because I get the following error:</p>
  
  <blockquote>
    <p>Can't bind to 'ngForIn' since it isn't a known property of 'div'. ("
    ]*ngFor="let key in
    prodetail.codeStatistics"></p>
  </blockquote>
  
  <p>How can I loop over the dictionary?a</p>