title: Can't loop through my interface element with *ngFor in html file of Angular 2
body: <p>I am getting data from API through my Interface but unable to show those data with the help of <code>*ngFor</code> directives in Html File.</p>
  
  <p>Below is my Interface named LabRateInterface</p>
  
  <pre><code>export interface second1 {
    user: number;
  }
  
  export interface third1 {
    user: number;
  }
  
  export interface Healthpackages {
    second: second1;
    third: third1;
  }
  
  export interface PrePaid {
    block_on_zero_balance: boolean;
    deposit: any[];
    max_recharge: number;
  }
  
  export interface HealthPackage {
    _id: string;
    name: string;
    mrp: number;
    user: number;
    available: boolean;
    cashback: number;
  }
  
  export interface Testgroup {
    _id: string;
    name: string;
    user: number;
    mrp: number;
    cashback: number;
    available: boolean;
  }
  
  export interface Time {
    to: string;
    from: string;
  }
  
  export interface Days {
    sat: boolean;
    fri: boolean;
    thu: boolean;
    wed: boolean;
    tue: boolean;
    mon: boolean;
    sun: boolean;
  }
  
  export interface Timing {
    time: Time;
    days: Days;
  }
  
  export interface Facilities {
    online_report: boolean;
    nabl: boolean;
    parking: boolean;
    ac: boolean;
    insurance: boolean;
    credit_card: boolean;
    home_collection: boolean;
  }
  
  export interface Admin {
    password: string;
    username: string;
  }
  
  export interface Geolocation {
    latitude: number;
    longitude: number;
  }
  
  export interface ReportHeader {
    line4: string;
    line3: string;
    line2: string;
    line1: string;
  }
  
  export interface Cover {
    mobile: string;
    image: string;
  }
  
  export interface LabsRatelistInterface {
    _id: string;
    __v: number;
    address: string;
    created_on: Date;
    email: string;
    name: string;
    phone: string;
    rating: number;
    healthpackages: Healthpackages;
    home_collection_price: number;
    pre_paid: PrePaid;
    reviews: any[];
    health_packages: HealthPackage[];
    testgroups: Testgroup[];
    timing: Timing;
    home_collection: boolean;
    lab_visit: boolean;
    home_collection_only: boolean;
    facilities: Facilities;
    employees: any[];
    admin: Admin;
    contacts: any[];
    city: string;
    geolocation: Geolocation;
    report_header: ReportHeader;
    cover: Cover;
    camp: boolean;
    franchisee: boolean;
    publish: boolean;
  }
  </code></pre>
  
  <p>Now I make a variable <code>labsRateInterface:LabsRatelistInterface;</code></p>
  
  <pre><code>onChange(event) {
    console.log(event.value);
    this.labsRatelistService.getlabs(event.value).subscribe(
      ShowData =&gt; {
        this.labsRateInterface = ShowData;
        console.log(this.labsRateInterface);
        for (let i = 0; i &lt; this.labsRateInterface.testgroups.length; i++) {
          console.log(this.labsRateInterface.testgroups[i].name)
        }
      }, error =&gt; {
        this.statusMessage = error;
      });
  }
  </code></pre>
  
  <p>and finally below is my HTML where I want to print the list of test group</p>
  
  <pre><code>&lt;tbody&gt;
    &lt;tr *ngFor="let test of labsRateInterface.testgroups; let i=index"&gt;
      &lt;td&gt;{{i+1}}&lt;/td&gt;
      &lt;td&gt;{{test._id}}&lt;/td&gt;
      &lt;td&gt;{{test.name}}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>But It is showing an error "testgroup property of undefined" and not printing anything.</p>