如何转换Observable 到数组[]

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何转换Observable 到数组[]相关的知识,希望对你有一定的参考价值。

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

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将返回任何Observable,无法绑定到rowData?

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

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

答案

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

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

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

另一答案

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

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

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

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

countries:CountryData[] = [];

并订阅它像这样:

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

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

另一答案

这应该工作:

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'
另一答案

//零件。 home.ts:

  contacts:IContacts[];


ionViewDidLoad() {
this.rest.getContacts()
.subscribe( res=> this.contacts= res as IContacts[]) ;

// reorderArray。只接受数组

    Reorder(indexes){
  reorderArray(this.contacts, indexes)
}

//服务res.ts

getContacts(): Observable<IContacts[]> {
return this.http.get<IContacts[]>(this.apiUrl+"?results=5")

它工作正常

以上是关于如何转换Observable 到数组[]的主要内容,如果未能解决你的问题,请参考以下文章

将 JSON 对象数组转换为 Observable<string[]>

如何在基础活动暂停时暂停rxjava Observable.interval

Angular 4 Observable,NgFor 只支持绑定到 Iterables,比如数组

RxJS 将 observable 附加到 typescript 中的 observable 数组列表

如何通过 Observable 属性对项目数组进行排序?

如何将 BVH 节点对象转换为简单数组?