it-swarm.com.de

Wie konvertiert man Observable <any> in Array []

Ich habe folgende Methode in TypeScript, ich muss an ein Winkelgitter binden 

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 wird jedoch Beobachtbare von allen zurückgeben, die sich nicht an rowData binden lassen.

Wie konvertiert man Observable zu CountryData [] in TypeScript?

sie finden JSON-Daten hier: http://services.groupkt.com/country/get/all

21
Ragavan

Sie müssen Ihre Observables abonnieren:

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

Und in Ihrer HTML-Datei können Sie, wo immer dies erforderlich ist, die async-Pipe an sie übergeben.

20
CozyAzure

Mit HttpClient (Http-Ersatz) in Angular 4.3+ wird der gesamte Mapping-/Casting-Prozess vereinfacht/eliminiert. 

Mit Ihrer CountryData-Klasse würden Sie eine Servicemethode folgendermaßen definieren:

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

Wenn Sie es brauchen, definieren Sie ein Array wie folgt:

countries:CountryData[] = [];

und abonniere es so:

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

Eine vollständige Setup-Antwort ist hier gepostet auch.

12
mohsenmadi

Das sollte funktionieren:

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

Damit dies funktioniert, müssen Sie Folgendes importieren:

import 'rxjs/add/operator/map'
2
pixelbits

// Komponente. home.ts:

  contacts:IContacts[];


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

// reorderArray. akzeptiert nur Arrays

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

// Bedienung . res.ts

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

Und es funktioniert gut

0
SAM.Am