angularJS2でカスケードを使用するには？

Question

私は国、州、市の選択コントロールを持っているとしますが、私は都市をバインドしたいのですが、どうすれば国と州の価値を得ることができますか？私のコードは、このコードでは今、この

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

のようなものです、私はこの

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

今私の挑戦は同様に、両方の国の値を取得することであるようなHTML要素から状態をバインドする値を取得します都市のドロップダウンをバインドするための状態として、どうやってこれをangJS2を使って行うことができますか？

Answer 1

なく、あなたの実際の問題を取得することは簡単、しかし、あなたのコードで、私はアイデアを得た。..

あなたがの角度結合法を使用する必要があります！

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