title: Angular2 : Type 'Subscription' is not assignable to type
body: <p>I have created a very small application to fetch countries from a json file and bind it to dropdown.</p>
  
  <blockquote>
    <p>countries.json</p>
  </blockquote>
  
  <pre><code>export class Country {
      id: number;
      name: string;
  }
  </code></pre>
  
  <blockquote>
    <p>factory.service.ts</p>
  </blockquote>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response} from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  
  import { Country } from './shared/country';
  
  @Injectable()
  export class FactoryService {
      private countryUrl = "app/data/countries.json";
  
      constructor(private http: Http) {
  
      }
  
      getCountry(): Observable&lt;any&gt; {
          return this.http.get(this.countryUrl)
              .map(this.extractData)
              .do(data =&gt; console.log("get Countries from json: " + JSON.stringify(data)))
              .catch(this.handleError);
      }
  
      private extractData(response: Response) {
          let body = response.json();
          return body || {};
      }
  
      private handleError(error: Response) {
          console.log(error);
          return Observable.throw(error.json().error || "500 internal server error");
      }
  }
  </code></pre>
  
  <blockquote>
    <p>factory-form.component.ts</p>
  </blockquote>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { NgForm } from '@angular/forms';
  
  import { Factory } from './factory';
  import { Country } from './shared/country';
  import { FactoryService } from './factory.service';
  
  @Component({
      moduleId: module.id,
      selector: 'factory-form',
      templateUrl: './factory-form.component.html',
      styleUrls: ['./factory-form.component.css'],
      providers: [FactoryService]
  })
  export class FactoryFormComponent implements OnInit{
  
      private model: Factory;
      countries: Country[];
      factoryStatuses;
      productTypes;
      risks;
      private errorMessage: string;
      private submitted = false;
  
      constructor(private factoryService: FactoryService) {
  
      }
  
      ngOnInit(): void {
          this.countries = this.factoryService.getCountry()
              .subscribe(countries =&gt; this.countries = countries,
              error =&gt; this.errorMessage = error);
      }
  
      onSubmit(): void {
          this.submitted = true;
      }}
  </code></pre>
  
  <blockquote>
    <p>factory-form.component.html snippet</p>
  </blockquote>
  
  <pre><code>&lt;div class="col-lg-3"&gt;
              &lt;select class="form-control" name="Country"&gt;
                  &lt;option *ngFor="let country of countries" [value]="country.id"&gt;{{country.name}}&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I am getting runtime error as below:</p>
  
  <blockquote>
    <p>Error: Typescript found the following errors:<br>
    C:/Projects/ethical_resourcing/src/Ethos.Client/tmp/broccoli_type_script_compiler-input_base_path-kviWq7F3.tmp/0/src/app/factory/factory-form.component.ts
    (30, 9): Type 'Subscription' is not assignable to type 'Country[]'.<br>
    Property 'length' is missing in type 'Subscription'.<br>
    C:/Projects/ethical_resourcing/src/Ethos.Client/tmp/broccoli_type_script_compiler-input_base_path-kviWq7F3.tmp/0/src/app/factory/shared/country.ts
    (2, 15): ';' expected.
        at BroccoliTypeScriptCompiler._doIncrementalBuild (C:\Projects\ethical_resourcing\src\Ethos.Client\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:120:19)
        at BroccoliTypeScriptCompiler.build (C:\Projects\ethical_resourcing\src\Ethos.Client\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10)
        at C:\Projects\ethical_resourcing\src\Ethos.Client\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
        at lib$rsvp$$internal$$tryCatch (C:\Projects\ethical_resourcing\src\Ethos.Client\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
        at lib$rsvp$$internal$$invokeCallback (C:\Projects\ethical_resourcing\src\Ethos.Client\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
        at lib$rsvp$$internal$$publish (C:\Projects\ethical_resourcing\src\Ethos.Client\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
        at lib$rsvp$asap$$flush (C:\Projects\ethical_resourcing\src\Ethos.Client\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)
        at nextTickCallbackWith0Args (node.js:420:9)
        at process._tickCallback (node.js:349:13)</p>
  </blockquote>
  
  <p>Now If I change the Type of <strong>Observable</strong> and <strong>countries</strong> to any then i get below error</p>
  
  <blockquote>
    <p><em>ORIGINAL EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables
    such as Arrays.</em></p>
  </blockquote>