Angular2 如何在下拉列表中绑定数据

Question

我在这里通过使用 Id 值获取数据请建议我如何在下拉列表中绑定此数据服务

 GetStatesById(id: number): Observable<State> {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        const sss = `${this.StateUrl}/${id}`
        return this._http.get(sss)
            .map(this.extractData)
            .do(data => console.log('getProduct: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }

Component.ts

 export class CascadeDrpComponent {
 StateObj: State[] = [];
    GetStates(CountryId: number) {
            return this._HttpService.GetStatesById(CountryId)
                .subscribe(data => this.StateObj.values())
        }

Html代码

  <select>
        <option>Please Select State</option>
        <option *ngFor="let sts of StateObj"></option>
    </select>

Answer 1

你做得对way.But有一些细节你应该注意。 1.sts 是一个对象，因此您不会在下拉列表中看到详细信息。 2.if 你 select 一个项目，你 select 编辑的值是一个对象，而不是它的属性之一，所以你应该小心这一点。

Answer 2

通过赋值，您可以绑定下拉列表中的数据

<select>
    <option>Please Select State</option>
    <option *ngFor="let sts of StateObj" value="{{sts.id}}">{{sts.name}}</option>
</select>

Angular2 如何在下拉列表中绑定数据

Angular2 How to Bind Data in DropdownList

angular2-forms