Angular2：類型'訂閱'不能分配給類型

Question

我創建了一個非常小的應用程序來從json文件中獲取國家/地區並將其綁定到下拉列表。

countries.json

export class Country {
    id: number;
    name: string;
}

factory.service.ts

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<any> {
        return this.http.get(this.countryUrl)
            .map(this.extractData)
            .do(data => 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");
    }
}

工廠form.component.ts

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 => this.countries = countries,
            error => this.errorMessage = error);
    }

    onSubmit(): void {
        this.submitted = true;
    }}

factory-form.component.html代碼段

<div class="col-lg-3">
            <select class="form-control" name="Country">
                <option *ngFor="let country of countries" [value]="country.id">{{country.name}}</option>
            </select>
        </div>

我收到運行時錯誤如下：

錯誤：Typescript發現以下錯誤：
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）：類型'訂閱'不是可分配給'Country []'類型。
“訂閱”類型中缺少“屬性'長度'。
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）：';' 預期。 在BroccoliTypeScriptCompiler._doIncrementalBuild（C：\\ Projects \\ ethical_resourcing \\ src \\ Ethos.Client \\ node_modules \\ angular-cli \\ lib \\ broccoli \\ broccoli-typescript.js：120：19）中的BroccoliTypeScriptCompiler.build（C：\\ Projects \\ ethical_resourcing \\ src \\ Ethos.Client \\ node_modules \\ angular-cli \\ lib \\ broccoli \\ broccoli-typescript.js：43：10）在C：\\ Projects \\ ethical_resourcing \\ src \\ Ethos.Client \\ node_modules \\ angular-cli \\ node_modules \\ broccoli-在lib $ rsvp $$ internal $$ tryCatch（C：\\ Projects \\ ethical_resourcing \\ src \\ Ethos.Client \\ node_modules \\ angular-cli \\ node_modules \\ rsvp \\ dist \\ rsvp.js）中的caching-writer \\ index.js：152：21 ：1036：16）在lib $ rsvp $$ internal $$ invokeCallback（C：\\ Projects \\ ethical_resourcing \\ src \\ Ethos.Client \\ node_modules \\ angular-cli \\ node_modules \\ rsvp \\ dist \\ rsvp.js：1048：17）at at lib $ rsvp $ asv $ lib $ rsvp $$ internal $$ publish（C：\\ Projects \\ ethical_resourcing \\ src \\ Ethos.Client \\ node_modules \\ angular-cli \\ node_modules \\ rsvp \\ dist \\ rsvp.js：1019：11） $ flush（C：\\ Projects \\ ethical_resourcing \\ src \\ Ethos.Client \\ node_modules \\ angular-cli \\ node_modu les \\ rsvp \\ dist \\ rsvp.js：1198：9）在process._tickCallback（node.js：349：13）的nextTickCallbackWith0Args（node.js：420：9）

現在，如果我將Observable的類型和國家更改為任何，那么我會得到以下錯誤

原始例外：找不到'object'類型的不同支持對象'[object Object]'。 NgFor僅支持綁定到諸如Arrays之類的Iterables。

Answer 1

是的，類型必須是Observable ，並且您需要使用異步管道來使ngFor happy：

*ngFor="let country of countries | async"

或者另一種選擇是保持Country[]類型，然后訂閱並將countries Country[]分配給數組：

this.factoryService.getCountry() // note, removed this.countries = 
    .subscribe(
        countries => this.countries = countries,
        error => this.errorMessage = error
    );