observables를 사용하여 angular2에서 드롭 다운을 비동기 적으로 바인드하는 방법은 무엇입니까?

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) = "0"처럼 angular2의 keyup 이벤트를 사용하려고했지만 결코 작동하지 않았습니다.

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> 

희망이

을하는 데 도움이