angular - ejemplo - Cómo convertir Observable<any> a matriz

return observable angular 6

Question

Tengo el siguiente método en mecanografiado, necesito enlazar a la cuadrícula angular

Servicio País

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

PaísDatos

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

¿Pero GetCoutries devolverá Observable de cualquiera, no puede enlazar a rowData?

¿Cómo convertir Observable a CountryData [] en mecanografía?

encuentra datos JSON aquí: http://services.groupkt.com/country/get/all

Answer 1

Al usar HttpClient (reemplazo de Http) en Angular 4.3+, todo el proceso de mapeo / conversión se simplifica / elimina.

Usando su clase CountryData, definiría un método de servicio como este:

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

Luego, cuando lo necesites, define una matriz como esta:

countries:CountryData[] = [];

Y suscríbete así:

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

Una respuesta de configuración completa se publica aquí también.

Answer 2

Deberás suscribirte a tus observables:

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

Y, en su html, donde sea necesario, puede pasarle el conducto async .

Answer 3

Esto debería funcionar:

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

Para que esto funcione, necesitarás importar lo siguiente:

import ''rxjs/add/operator/map''

Answer 4

//Componente. home.ts:

  contacts:IContacts[];


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

// reorderArray. acepta solo matrices

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

// Servicio . res.ts

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

Y funciona bien