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

Question

我在打字稿中有如下方法，我需要绑定到角网格。

CountryService

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

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();

CountryData

export class CountryData{
  name: string;
  alpha2_code: string;
  alpha3_code: string;
}

但是GetCoutries会返回可观察到的，无法绑定到rowData的吗？

如何在打字稿中将“可观察”转换为“CountryData[]”？

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

Answer 1

您需要订阅您的可观察到的：

this.CountryService.GetCountries()
    .subscribe(countries => {
        this.myGridOptions.rowData = countries as CountryData[]
    })

而且，在您的html中，只要需要，就可以将async管道传递给它。

Answer 2

使用HttpClient (Http's替换)在角4.3+，使整个映射/铸造过程变得更简单/消除。

使用您的CountryData类，您将定义如下所示的服务方法：

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

然后，当您需要它时，定义如下数组：

countries:CountryData[] = [];

然后像这样订阅：

this.countryService.getCountries().subscribe(countries => this.countries = countries);

一个完整的设置回答is posted here也。

Answer 3

这应该是可行的：

GetCountries():Observable<CountryData[]>  {
  return this.http.get(`http://services.groupkt.com/country/get/all`)
    .map((res:Response) => <CountryData[]>res.json());
}

为此，您需要导入以下内容：

import 'rxjs/add/operator/map'