web-dev-qa-db-fra.com

Comment convertir Observable <any> en tableau []

J'ai la méthode suivante dans TypeScript, je dois me lier à la grille angulaire 

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

Mais GetCoutries renverra Observable, incapable de se lier à rowData?

Comment convertir Observable en CountryData [] dans TypeScript?

vous trouvez les données JSON ici: http://services.groupkt.com/country/get/all

angulartypescriptrxjs
21
Ragavan

Vous devrez vous abonner à vos observables:

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

Et, dans votre code html, vous pouvez lui transmettre le code async, le cas échéant.

20
CozyAzure

En utilisant HttpClient (le remplacement de Http) dans Angular 4.3+, l'ensemble du processus de cartographie/diffusion est simplifié/éliminé. 

En utilisant votre classe CountryData, vous définiriez une méthode de service comme celle-ci:

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

Puis quand vous en avez besoin, définissez un tableau comme celui-ci:

countries:CountryData[] = [];

et abonnez-vous comme ça:

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

Une réponse complète d’installation est publiée ici aussi.

12
mohsenmadi

Cela devrait fonctionner:

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

Pour que cela fonctionne, vous devez importer les éléments suivants:

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

// Composant. home.ts: 

  contacts:IContacts[];


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

// reorderArray. accepte uniquement les tableaux 

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

// Un service . res.ts 

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

Et ça marche bien

0
SAM.Am