title: in Angular 2 , Cannot find a differ supporting object '[object Object]' of type 'leaveType'. NgFor only supports binding to Iterables such as Arrays
body: <p>I searched and explore for this problem and got the solution but they didn't work for me,  I want to show a static data/list in my dropdown options in typescript, I am using an array of object <code>leaveType</code>. But when I am doing this then got this error:</p>
  
  <p><strong>ORIGINAL EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'leaveType'. NgFor only supports binding to Iterables such as Arrays.</strong></p>
  
  <p><strong>please suggest where I am doing wrong.</strong></p>
  
  <p>My code is:</p>
  
  <p><strong>team-component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, HostBinding                       } from '@angular/core';
  import { FormGroup, FormBuilder, Validators      } from '@angular/forms';
  import { IMyOptions, IMyDateModel                } from 'mydatepicker';
  import { CONSTANT                                } from '../../constants/dash-constant';
  import { TeamService                             } from '../../services/team-component.service';
  import { slideInDownAnimation                    } from '../../animations/animations'
  
  @Component({
    selector: 'team-component',
    templateUrl: `../app/modules/dashboard/dashComponents/teamComponents/team.component.html`,
    animations: [slideInDownAnimation],
  
  })
  
  export class TeamComponent implements OnInit {
    @HostBinding('@routeAnimation') routeAnimation = true;
    @HostBinding('style.display') display = 'block';
    @HostBinding('style.position') position = 'absolute';
  
    constructor(private teamService: TeamService) {
    }
  
  
    ngOnInit() {
       this.leaveType.push({ id: 0, type: 'Earned Leave' });
       console.log( this.leaveType);
      }
       private leaveType:any=[];
       public leave:any= { "employee": null, "from": null, "to": null,'leaveType':null };
  
   }
  </code></pre>
  
  <p><strong>team-component.html:</strong></p>
  
  <pre><code> &lt;div class="row"&gt;
              &lt;h4&gt;Leave Type:&lt;/h4&gt;
              &lt;div class="form-group  col-md-10"&gt;
                &lt;select id="leaveType" class="form-control" name="leaveType" [(ngModel)]="leave.leaveType" required #leaveType="ngModel"&gt;
            &lt;option *ngFor="let p of leaveType" [value]="p.type"&gt;{{p.type}}&lt;/option&gt;
          &lt;/select&gt;
                &lt;div *ngIf="leaveType.errors &amp;&amp; leaveType.touched" class="alert alert-danger"&gt;
                  &lt;div [hidden]="!leaveType.errors.required &amp;&amp; leaveformSubmitted"&gt;Leave type is required&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>