أنجولار - كيفية تحويل Observable إلى مصفوفة[]

لدي الطريقة التالية في تايبسكريبت، أحتاج إلى ربطها بشبكة Angular

خدمة الدولة

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

مكوّن الشبكة

  template: `
        <ag-grid-ng2 style="width: 100%" #agGrid class="ag-material"
                    rowHeight="50"
                    [gridOptions]="myGridOptions" 
                     >
            </ag-grid-ng2>
        `,

  this.myGridOptions.rowData= this.CountryService.GetCountries();

بيانات الدولة

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

لكن GetCountries ستُرجع Observable من أي نوع، غير قادر على الربط بـ rowData؟

كيف يمكن تحويل Observable إلى CountryData[] في Typescript؟

يمكنك العثور على بيانات JSON هنا: http://services.groupkt.com/country/get/all

الإجابة رقم 1

ستحتاج إلى الاشتراك في الملاحظات الخاصة بك:

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

وفي ملف الـ html الخاص بك، حيثما احتجت، يمكنك تمرير المِلَف async إليه.

الإجابة رقم 2

باستخدام HttpClient (بديل Http) في Angular 4.3+، أصبح كل عملية التعيين/التحويل أبسط أو تم التخلص منها.

باستخدام فئة CountryData الخاصة بك، ستقوم بتعريف طريقة خدمة مثل هذا:

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

ثم عندما تحتاجها، عرف مصفوفة مثل هذا:

countries:CountryData[] = [];

واشترك فيه هكذا:

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

تم نشر إجابة إعداد كاملة هنا أيضًا.