如何使用observables在angular2中异步绑定下拉列表？

问题描述：

我是新来的angular2，我想知道如何使用angular2异步绑定下拉？我有这样如何使用observables在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>

我也尝试使用angular2的keyup事件像这样（keyup）=“0”，但它从来没有工作。

答

我在试图找到答案时遇到了您的问题。

我不清楚你的服务是否返回了可观察的。这是我的解决方案，如果它帮助某人，毕竟这个时间：

首先，这个服务从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>

希望这有助于

如何使用observables在angular2中异步绑定下拉列表？

相关推荐