如何将Observable <any>转换为array []

Rag*_*van 29 rxjs typescript angular

我在打字稿中有以下方法,我需要绑定到角度网格

CountryService

GetCountries()  {
  return this.http.get(`http://services.groupkt.com/country/get/all`)
    .map((res:Response) => <CountryData[]>res.json().RestResponse["result"]);
}
Run Code Online (Sandbox Code Playgroud)

GridComponent

  template: `
        <ag-grid-ng2 style="width: 100%" #agGrid class="ag-material"
                    rowHeight="50"
                    [gridOptions]="myGridOptions" 
                     >
            </ag-grid-ng2>
        `,

  this.myGridOptions.rowData= this.CountryService.GetCountries();
Run Code Online (Sandbox Code Playgroud)

CountryData

export class CountryData{
  name: string;
  alpha2_code: string;
  alpha3_code: string;
}
Run Code Online (Sandbox Code Playgroud)

但GetCoutries将返回任何Observable,无法绑定到rowData?

如何在打字稿中将Observable转换为CountryData []?

你可以在这里找到JSON数据:http://services.groupkt.com/country/get/all

Coz*_*ure 32

您需要订阅您的可观察量:

this.CountryService.GetCountries()
    .subscribe(countries => {
        this.myGridOptions.rowData = countries as CountryData[]
    })
Run Code Online (Sandbox Code Playgroud)

并且,在您的HTML中,无论何时需要,您都可以将async管道传递给它.


moh*_*adi 14

在Angular 4.3+中使用HttpClient(Http的替换),整个映射/转换过程变得更简单/消除.

使用CountryData类,您将定义一个这样的服务方法:

getCountries()  {
  return this.httpClient.get<CountryData[]>('http://theUrl.com/all');
}
Run Code Online (Sandbox Code Playgroud)

然后在需要时,定义一个这样的数组:

countries:CountryData[] = [];
Run Code Online (Sandbox Code Playgroud)

并订阅它像这样:

this.countryService.getCountries().subscribe(countries => this.countries = countries);
Run Code Online (Sandbox Code Playgroud)

此处还会发布完整的设置答案.