3角度4的國家，州和城市級聯下拉菜單

Question

我想爲國家，州和城市顯示3級級聯下拉菜單。 我得到了國家ID的狀態，但對於我沒有得到的城市。 這裏是我的html代碼

<div> 
     <label>State:</label> 
     <select class="full-width"> 
      <option *ngIf='selectedCountry.id == 0' value="0">--Select-- 
</option> 
      <option *ngFor="let state of states " value= {{state.id}}> 
{{state.name}}</option> 
     </select> 
     </div> 
     <div> 
     <label>City:</label> 
     <select class="full-width"> 
      <option *ngIf='selectedCountry.id == 0' value="0">--Select--</option> 
      <option *ngFor="let citi of cities " value= {{citi.id}}>{{citi.name}}</option> 
     </select> 
     </div> 

這裏是獲得國家和國家代碼：

onSelect(countryid) { 
this.states = this.dataServie.getStates().filter((item)=> 
item.countryid == countryid); 
//this.states = this._dataService.getStates().filter((item)=> 
item.countryid == countryid); 
} 

這裏是country.ts代碼：

export class Country { 
constructor(public id: number, public name: string) { } 
} 

export class State { 
constructor(public id: number, public countryid: number, public name: 
string) { } 
} 

這裏是城市的代碼。：

export class City { 
constructor(public stateid: number, public name: string) { } 
} 

我沒有得到我如何稱爲特定狀態的城市編號 任何人都可以幫我。預先感謝。

Answer 1

您需要創建一個函數來檢索城市並將其保存在控制器中。與onSelect（countryid）類似，您需要創建一個selectState（stateid）函數來檢索城市並將其分配給this.cities。

也城市不拼寫citi。

Answer 2

您需要將它添加到模板

<label>State:</label> 
<select [(ngModel)]="selectedState.id" (change)="select($event.target.value)"> 
    <option *ngFor="#state of states " value= {{state.id}}>{{state.name}}</option> 
</select> 

<label>city </label> 
<select> 
    <option *ngFor="#city of cities " value= {{city.id}}>{{city.name}}</option> 
</select> 

這組件

select(stateid){ 
    this.cities = this._dataService.getCities().filter((item)=> item.stateid == stateid); 

    } 

工作Plunker添加相同LINK