web-dev-qa-db-ja.com

Observable <any>をarray []に変換する方法

TypeScriptに次のメソッドがあり、angular gridにバインドする必要があります

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にバインドできませんか？

TypeScriptでObservableをCountryData []に変換する方法は？

jSONデータはここにあります： http://services.groupkt.com/country/get/all

angulartypescriptrxjs
27
Ragavan

オブザーバブルをサブスクライブする必要があります。

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

そして、あなたのhtmlで、必要な場所にasyncパイプを渡すことができます。

30
CozyAzure

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

完全なセットアップの答え ここに投稿されています も。

14
mohsenmadi

これは動作するはずです：

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'
2
pixelbits

// Component。home.ts：

  contacts:IContacts[];


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

// reorderArray。配列のみを受け入れます

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

// Service。res.ts

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

そしてそれはうまく動作します

1
SAM.Am