title: How can I use Angular4 *ngFor to create a data table?
body: <p>I am working on a project using Angular4 to get data from an API and using*ngFor to render a data table. Because I still have more aips with same structure, I want to use (key, value) pair to display them. In AngularJS, I have correctly rendered the table like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!--This is Good in AngularJS--&gt;
   &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th ng-repeat="(key, value) in data.items[0]"&gt; {{key}}
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr  ng-repeat ="data in data.items &gt;
          &lt;td ng-repeat="(key,value) in data"&gt;{{ value }}&lt;/td&gt;           
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>However, the table doesn't show in Angular4 correctly. The original json data from API shows like: </p>
  
  <pre class="lang-js prettyprint-override"><code>{
      items: [
      {
          status: "Sold - Payment Received",
          count: 30,
          loans: 8,
          dl_loans: 8,
          avg_available: 149.5,
          min: 28,
          max: 346,
          principal: 13452.37,
          closed: 0,
          chrg_of_balance: 0,
          final_balance: 0
      },
      {
          status: "At Auction - Awaiting Info",
          count: 4,
          loans: 4,
          dl_loans: 4,
          avg_available: 70.45,
          min: 36,
          max: 102,
          principal: 11727.8,
          closed: 0,
          chrg_of_balance: 0,
          final_balance: 0
      },
      ...
  }
  </code></pre>
  
  <p>Here is my app.component.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>ngOnInit(): void {
      this.dataService.getData().subscribe(
        (data) =&gt; {
          this.data = data.items;
          this.titles = data.items[0];
        }
      );
  }
  </code></pre>
  
  <p>I have created a pip.ts for filter key and value:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { PipeTransform, Pipe } from '@angular/core';
  @Pipe({name: 'keys'})
  export class KeysPipe implements PipeTransform {
    transform(value, args:string[]) : any {
      let keys = [];
      for (let key in value) {
        keys.push({key: key, value: value[key]});
      }
      return keys;
    }
  }
  </code></pre>
  
  <p>In Angular4 HTML: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!--This is Bad in Angular4--&gt;
  &lt;table&gt;
   &lt;thead align="center"&gt;
       &lt;tr&gt;
           &lt;th *ngFor = "let item of titles | keys"&gt; 
             {{item.key}}
           &lt;/th&gt;
       &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
       &lt;tr&gt;
        &lt;td *ngFor = "let item of data | keys "&gt; 
          {{item.value | json }}
        &lt;/td&gt;           
       &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>However the thead in UI shows fine, but the tbody part shows including the whole object (partly): </p>
  
  <pre><code>    status 
  ---------------------------------------
  {
      status: "Sold - Payment Received",
      count: 30,
      loans: 8,
      dl_loans: 8,
      avg_available: 149.5,
      min: 28,
      max: 346,
      principal: 13452.37,
      closed: 0,
      chrg_of_balance: 0,
      final_balance: 0
   }
  --------------------------------------
  </code></pre>
  
  <p>Anyone knows how can I render this table correctly? Thank you in advanced!</p>