title: Array of object showing undefined duing ngOninit in angular 5
body: <p>Even when I am trying to access inside html like this, its also not giving any value</p>
  
  <pre><code>  &lt;mat-nav-list&gt;
        &lt;a mat-list-item href="" *ngFor="let link of products"&gt; {{ link.name }} &lt;/a&gt;
     &lt;/mat-nav-list&gt;
  </code></pre>
  
  <p>Here is my JSON </p>
  
  <pre><code>[{"id":215,"name":"Book ambulance","slug":"book-ambulance","permalink":"http://staging.drmedapp.com.cp-36.webhostbox.net/demo/product/book-ambulance/","date_created":"2018-02-24T08:31:01","date_modified":"2018-02-24T08:32:13","type":"simple","status":"publish","featured":false,"catalog_visibility":"visible","description":"","short_description":"","sku":"","price":"0","regular_price":"0","sale_price":"","date_on_sale_from":"","date_on_sale_to":"","price_html":"&lt;span class=\"woocommerce-Price-amount amount\"&gt;&lt;span class=\"woocommerce-Price-currencySymbol\"&gt;&amp;#8377;&lt;/span&gt;0.00&lt;/span&gt;","on_sale":false,"purchasable":true,"total_sales":0,"virtual":false,"downloadable":false,"downloads":[],"download_limit":-1,"download_expiry":-1,"download_type":"standard","external_url":"","button_text":"","tax_status":"taxable","tax_class":"","manage_stock":false,"stock_quantity":null,"in_stock":true,"backorders":"no","backorders_allowed":false,"backordered":false,"sold_individually":false,"weight":"","dimen
  </code></pre>
  
  <p>Here is my .ts file, I updated the code but still getting error this.products is not defined.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {Headers, Http, RequestOptions, URLSearchParams} from '@angular/http';
  import 'rxjs/add/operator/toPromise';
  import * as WC from 'woocommerce-api';
  import { WooApiService } from 'ng2woo';
  import * as CryptoJS from 'crypto-js';
  
  @Component({
    selector: 'app-pcat',
    templateUrl: './pcat.component.html',
    styleUrls: ['./pcat.component.scss']
  })
  export class PcatComponent implements OnInit {
    WooCommerce: any;
    public products: any;
    data: any;
    public crypto: any;
    typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
  
    constructor(private woo: WooApiService) {}
  
    public getALL(){
      this.woo.fetchItems('products')
        .then(products =&gt; {
           for(var i = 0; i &lt; products.length; i++) {
              this.products.push(products[i])
           }
        })
        .catch(error =&gt; console.log(error));
      } 
    ngOnInit(): void  {
      this.getALL();
    }
  }
  </code></pre>