angular4 中国家、州和城市的 3 个级联下拉列表

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

这里是 city.ts 的代码：

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

我不知道我如何称呼特定州 ID 的城市 谁能帮帮我。提前谢谢。

Answer 1

您需要创建一个函数来检索城市并将其保存在您的控制器中。与 onSelect(countryid) 类似，您需要创建一个 selectState(stateid) 函数来检索城市并将其分配给 this.cities。

还有city不拼写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);

  }

为同一 LINK 工作 Plunker