Как связать выпадающий асинхронно в угловом2 с помощью наблюдаемых?

Question

Я новичок в angular2, и мне интересно, как связать выпадение асинхронно с помощью angular2? У меня есть сервис, как этот

this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry') 
      .subscribe(value => { 
       var results = JSON.parse(value['_body']); 
       for (let d of results) { 
        this.countries.push(new Country(d['Country'], d['CountryCode'])) 
       } 
      }, error => error,() => { 
       console.log('complete'); 
       return this.countries; 

      }); 

и я звоню службу из компонента, как этот

this.countries = this.countryServices.getCountry(); 

Теперь, когда я пытаюсь связать данные в выпадающем списке, я не в состоянии связать его

<select class="form-control input-sm" formControlName="country">            
    <option class="small" *ngFor="let c of countries" value="{{c.countryCode}}">{{c.countryName}}</option> 
</select> 

Я также попытался использовать KeyUp событие angular2 как это (KeyUp) = «0», но он никогда не работал.

Answer 1

Я наткнулся на ваш вопрос, пытаясь найти ответ на него.

Мне было непонятно, что ваша служба возвращает наблюдаемый. Вот мое решение, если это помогает кому-то, после всего этого времени:

Сначала эта служба получает данные из базы данных firebase и преобразует их в пользовательский интерфейс, возвращая это как наблюдаемый. В реальной службе должен быть включен обработчик ошибок.

import {Injectable} from "@angular/core"; 
import {AngularFireDatabase} from "angularfire2/database/database"; 
import {IkeyName, KeyValPair} from "interfaces/IkeyName"; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/fromPromise'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class SelectLists { 
private rootRef = this.db.database.ref(); 

constructor(public db: AngularFireDatabase) {} 

getAllOrgs(): Observable<IkeyName[]> { 
var companyKeys = this.rootRef.child('organization'); 

return Observable.fromPromise(companyKeys.once("value")).map((data) => { 
    var kps: IkeyName[] = []; 

    for (let orgKey of Object.keys(data.val())){ 
     //Custom translation of database data to Your interface 
     var kp = new KeyValPair(); 
     kp.Id = data.val().databaseId 
     kp.Name = data.val().databaseNameValue 
     kps.push(kp); 
    } 
    return kps; 

}); 

Далее, в классе компонентов мы вводим услугу и вызываем ее.

export class GrowerReceiptComponent implements OnInit { 
public orgList : Observable<IkeyName[]>; 
public selectedOrg : IkeyName; 

constructor(public selLists: SelectLists) { 
    this.orgList = selLists.getAllOrgs(); 
} 

ngOnInit() {} 
} 

... И, наконец, связать это наблюдаемое значение ниспадающего зрения Обратите внимание: 1. Наблюдаемым подписался в представлении с | ansync 2. Выбранный элемент привязан ко всему объекту, а не только к значению свойства 3. Видимая часть хранится только в части имени объекта.

<select class="form-control" required [(ngModel)]="selectedOrg" > 
    <option *ngFor="let org of orgList | async" [ngValue]="org">{{org.Name}}</option> 
</select> 

Надежда Это помогает