如何在 angularJS2 中使用级联？

Question

假设我有一个 select 控制国家、州和城市，我想绑定城市时如何获得国家和州的值？我的代码是这样的

  bindCountry = () => {
        let data = new Array();
        let _countries = new Array();
        this.location.getCountry().subscribe(_sub => {
            data = _sub.json();
        }, _error => { }, () => {
            data.map((value, index, arr) => {
                _countries.push(new Country(value["id"], value["name"]));
            });
            this.countries = _countries;
            this.bindDropDown('selCountry', 'countryID', 'Please select Country', 'countryName', this.countries);
        });
    }
    bindState = (x: number) => {
        let data = new Array();
        let _state = new Array();
        this.location.getState(x).subscribe(_sub => {
            data = _sub.json();
        }, _error => { }, () => {
            data.map((value, index, arr) => {
                if (value['countryId'] == x) {
                    _state.push(new State(value['countryId'], value['id'], value['name']));
                }
            });
            this.states = _state;
            this.bindDropDown('selState', 'StateID', 'Please select State', 'StateName', this.states);
        });

    }
    bindCity = (x: number) => {

        var y: any;
        let data = new Array();
        let _city = new Array();
        this.location.getCity(x, y).subscribe(_sub => {
            _city = _sub.json();
        }, _error => { }, () => {
            data.map((value, index, arr) => {
                debugger;
                if (value['countryId'] == x && value['stateId'] == y) {
                    _city.push(new City(value['countryId'], value['stateId'], value['id'], value['name']));
                }
            });
            this.cities = _city;
            this.bindDropDown('selCity', 'CityID', 'Please select City', 'CityName', this.cities);
        })
    }

现在在这段代码中，我从 html 元素中获取绑定状态的值，如下所示

<select class="form-control" id="selCountry" (change)="bindState($event.target.value)" disabled></select>

现在我的挑战是获取国家和州的值来绑定城市下拉列表，我如何使用 angularJS2 做到这一点？

Answer 1

不是那么容易得到你的实际问题，但通过你的代码我有了一个想法..

你应该使用angular的绑定方法！

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax-an-overview

<div class="col-xs-12">
    <div class="col-xs-5 form-group">
        <label>Country</label>
        <select class="form-control" id="selCountry" [(ngModel)]="selectedCountry" (ngModelChange)="countryChanged()" >
          <option value="0">select</option>
          <option *ngFor="let c of countries" [value]="c.id">
            {{ c.name }}
          </option>
        </select>
    </div>
    <div class="col-xs-5 form-group col-xs-offset-2">
        <label>State</label>
        <select class="form-control" id="selState" [(ngModel)]="selectedState" (ngModelChange)="stateChanged()" [disabled]="!states.length" >
          <option value="0">select</option>
          <option *ngFor="let s of states" [value]="s.id">
            {{ s.name }}
          </option>
        </select>
    </div>
</div>
<!--#-->
<div class="col-xs-12">
    <div class="col-xs-5 form-group">
        <label>City</label>
        <select class="form-control" id="selCity" [(ngModel)]="selectedCity" (ngModelChange)="cityChanged()" [disabled]="!cities.length" >
          <option value="0">select</option>
          <option *ngFor="let c of cities" [value]="c.id">
            {{ c.name }}
          </option>
        </select>
    </div>
</div>

现场演示：https://plnkr.co/edit/5U4Mye6248siSJIiiapZ?p=preview

如何在 angularJS2 中使用级联？

How to work with cascading in angularJS2?

cascadingdropdown

angular