I have following method in typescript, I need to bind to 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;
}
But GetCoutries will return Observable of any, unable to bind to rowData?
How to convert Observable to CountryData[] in typescript ?
you find JSON data here: http://services.groupkt.com/country/get/all
This question is related to
angular
typescript
rxjs
Using HttpClient (Http's replacement) in Angular 4.3+, the entire mapping/casting process is made simpler/eliminated.
Using your CountryData class, you would define a service method like this:
getCountries() {
return this.httpClient.get<CountryData[]>('http://theUrl.com/all');
}
Then when you need it, define an array like this:
countries:CountryData[] = [];
and subscribe to it like this:
this.countryService.getCountries().subscribe(countries => this.countries = countries);
A complete setup answer is posted here also.
This should work:
GetCountries():Observable<CountryData[]> {
return this.http.get(`http://services.groupkt.com/country/get/all`)
.map((res:Response) => <CountryData[]>res.json());
}
For this to work you will need to import the following:
import 'rxjs/add/operator/map'
//Component. home.ts :
contacts:IContacts[];
ionViewDidLoad() {
this.rest.getContacts()
.subscribe( res=> this.contacts= res as IContacts[]) ;
// reorderArray. accepts only Arrays
Reorder(indexes){
reorderArray(this.contacts, indexes)
}
// Service . res.ts
getContacts(): Observable<IContacts[]> {
return this.http.get<IContacts[]>(this.apiUrl+"?results=5")
And it works fine
Source: Stackoverflow.com