Question

我想显示国家，州和城市的3级联下拉列表。我获得了国家身份证明，但对于城市我没有得到。这是我的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) { }
}

我没有得到我称之为特定国家身份的城市任何人都可以帮助我。谢谢你。

Answer 1

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

城市也没有拼写花旗。

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

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

2 个答案: