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 요소에서 상태를 결합 할 수있는 가치를 도시 드롭 다운을 바인딩 할 상태로 어떻게 angularJS2를 사용하여이 작업을 수행 할 수 있습니까?

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