angular - 如何使用 observables 在 angular2 中异步绑定(bind)下拉列表？

Question

我是 angular2 的新手，我想知道如何使用 angular2 异步绑定(bind)下拉菜单？我有这样的服务

 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();

现在当我尝试绑定(bind)下拉列表中的数据时，我无法绑定(bind)它

    <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"但它从来没有奏效。

Answer 1

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

我不清楚您的服务是否正在返回可观察值。这是我的解决方案，如果它对某人有帮助，毕竟这段时间:

首先，此服务从 firebase 数据库获取数据并转换为自定义接口(interface)，将其作为可观察对象返回。在实际服务中，应该包含一个错误处理程序。

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;

 });

接下来，在组件类中我们注入(inject)服务并调用它。

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

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

 ngOnInit() {}
}

... 最后将这个可观察值绑定(bind)到下拉 View 请注意:1. Observable 在 View 中使用 | 订阅。异步2.选中项绑定(bind)到整个对象，而不仅仅是一个值属性3. 可视部分仅保留对象的名称部分。

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

希望对你有帮助