web-dev-qa-db-ja.com

カスケードドロップダウン（国と州のリスト）を作成する方法Angular 6

カスケードドロップダウン（国および州のリスト）を作成する方法Angular 6.完全に国があり、angular 6。

pl zがあなたのアイデアを共有していることを知っている人なら誰でも。

angulardropdownangular6cascadingcountry-codes
3
user10153722

デモ----> カスケードドロップダウン（国および州のリスト）

HTML：

<label>Country</label>
<div  title="Please select the country that the customer will primarily be served from">
    <select placeholder="Phantasyland" (change)="changeCountry($event.target.value)">
        <option *ngFor ="let count of countryList">{{count.name}} </option>
    </select>
</div>


<label>City</label>
<div title="Please select the city that the customer is primarily to be served from.">
    <select placeholder="Anycity">
        <option *ngFor ="let city of cities">{{city}} </option>
  </select>
</div>

TS：

countryList: Array<any> = [
    { name: 'Germany', cities: ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'] },
    { name: 'Spain', cities: ['Barcelona'] },
    { name: 'USA', cities: ['Downers Grove'] },
    { name: 'Mexico', cities: ['Puebla'] },
    { name: 'China', cities: ['Beijing'] },
  ];
  cities: Array<any>;
  changeCountry(count) {
    this.cities = this.countryList.find(con => con.name == count).cities;
  }
3
Akj