如何使用Angular 4打字稿绑定表中的级联下拉菜单？

Question

根据我的plunker（在下面的commnet框查看plunker）每当我从第一行改变国家，然后绑定相应的下一个整列的状态下拉insted第一one.i要绑定状态下拉相应国家下拉，但在同一行。帮助将不胜感激。

Answer 1

您代码中的问题是您没有区分每个州的下拉菜单。所有三个人都使用相同的states，所以当您更改一个国家的州名单时，您也正在重设其他两个州。

我调整了代码很少使用number索引，这样每个状态下拉列表保持自己的列表，并可以单独设置而不影响其他列表。

component.ts：

export class CountryListComponent implements OnInit { 

    initState = new State(0, 0, 'Select'); 
    selectedCountry:Country[] = []; 
    countries: Country[]; 
    states: State[] = []; 

    allStates: State[] = []; 

    constructor(private _dataService: DataService) { 
    this.selectedCountry = [new Country(0, 'India', this.initState),new Country(0, 'India', this.initState),new Country(0, 'India', this.initState)]; 
    this.numbers = Array(3).fill().map((x,i)=>i); 
    this.countries = this._dataService.getCountries(); 
    this.states = [[], [], []] 
    } 

    ngOnInit(){ 
    this.allStates = this._dataService.getStates(); 
    } 

    onSelect(countryid,index) { 
    console.log(countryid, index) 
    this.states[index] = this.allStates.filter((item)=> item.countryid == countryid)); 
    console.log(this.states); 
    } 

    onStateSelect(stateid, index){ 
    console.log(stateid, index); 
    this.selectedCountry[index].state = this.allStates.filter((item)=> item.id == stateid)); 
    console.log(this.selectedCountry[index].state); 
    } 
} 

HTML：

<table> 
    <tr *ngFor="#number of numbers"> 
    <td> 
     <label>Country:</label> 
     <select [(ngModel)]="selectedCountry[number].id" (change)="onSelect($event.target.value, number)"> 
     <option value="0">--Select--</option> 
     <option *ngFor="#country of countries" value={{country.id}}>{{country.name}}</option> 
     </select> 
    </td> 
    <td> 
     <div> 
     <label>State:</label> 
     <select [(ngModel)]="selectedCountry[number].state.id" (change)="onStateSelect($event.target.value, number)"> 
      <option *ngIf='selectedCountry[number].state.id == 0' value="0">--Select--</option> 
      <option *ngFor="#state of states[number]" value={{state.id}}>{{state.name}}</option> 
     </select> 
     </div> 
    </td> 
    </tr> 
</table> 

Plunker demo

Answer 2

的级联国家创建一个指示和状态下拉。通过使用指令，Formomodule模板验证在Angular 4中开箱即可使用。

我已经使用指令扩展了来自Nehal的plunker示例。我提供的plunker示例没有验证实现。

Plunker example