title: Bind Select Dropdown in Angular with Static Object Array in Angular2
body: <p>I am binding Select DropDown with my static data. </p>
  
  <p><strong>ProffesionModel.ts</strong>  </p>
  
  <pre><code>export interface Proffesion {
      id : number;
      title : string;
  }
  </code></pre>
  
  <p><strong>app.PeopleListService.ts</strong>  </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Proffesion } from "../model/proffessionModel";
  
  @Injectable()
  export class PeopleService {
    proffesions : Proffesion[] = [
      {id : 1, title : "Teacher"},
      {id : 2, title : "Engineer"},
      {id : 3, title : "Doctor"}
    ];
  
    constructor() { }
    getAllProffession() : Proffesion[]{
      return this.proffesions;
    }
  }
  </code></pre>
  
  <p><strong>app.addperson.ts</strong></p>
  
  <pre><code>import { Component } from "@angular/core";
  import { ActivatedRoute, Router } from "@angular/router";
  import { Proffesion } from "../model/proffessionModel";
  import { PeopleService } from "../services/app.peopleListService";
  
  @Component({
      selector: 'add-person',
      templateUrl: 'addperson/app.addperson.html'
  })
  
  export class AddPersonComponent { 
      proffesion : Proffesion [];
      constructor(private route: ActivatedRoute, private router: Router, private peopleService:PeopleService){
          this.proffesion = peopleService.getAllProffession();
      }
  }
  </code></pre>
  
  <p><strong>app.addperson.html</strong></p>
  
  <pre><code>&lt;section&gt;
      &lt;form (ngSubmit)="savePerson()" #personForm="ngForm"&gt;
        &lt;div&gt;
          &lt;label for="profession"&gt;Profession: &lt;/label&gt;
          &lt;select name="proffesion" [(ngModel)]="person.proffesion" #proffesion="ngModel"&gt;
            &lt;option *ngFor="let p of proffesion" [value]="p.id"&gt;{{p.title}}&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
        &lt;div&gt;
         &lt;button type="submit" [disabled]="!personForm.form.valid"&gt;Save&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/section&gt;
  &lt;button (click)="gotoPeoplesList()"&gt;Back to peoples list&lt;/button&gt;
  </code></pre>
  
  <p>I am getting following error when my addperson page get load.</p>
  
  <blockquote>
    <p>EXCEPTION: Uncaught (in promise): Error: Error in addperson/app.addperson.html:28:18 caused by: Cannot find a differ supporting object '[object Object]' of type 'proffesion'. NgFor only supports binding to Iterables such as Arrays.</p>
  </blockquote>