如何在 Angular 6+（国家 <--> 城市）中创建相互级联下拉列表答案

【问题标题】：How to create mutual Cascading dropdown in Angular 6+ (country <--> city)如何在 Angular 6+（国家 <--> 城市）中创建相互级联下拉列表
【发布时间】：2020-02-20 23:24:52
【问题描述】：

我发现了很多关于如何创建选择国家和过滤状态的级联下拉列表的示例。但是有没有办法进行相互依赖的过滤。

就像我们可以从国家列表过滤城市，也可以从城市列表过滤国家。

因为现在我有两个下拉菜单，两个下拉菜单中的数据是相关的。我想要实现的功能是当我在第一个（或第二个）下拉菜单中选择一个元素时。在第二个（或第一个）下拉列表中，与菜单相关的元素将被突出显示。

我将设计包含在此处，以防我的解释不清楚。

提前感谢您的帮助。我是学习Angular的新手。任何建议将不胜感激！

下拉菜单设计：

【问题讨论】：

标签： angular dropdown

【解决方案1】：

我在StackBlitz 写了一个演示项目。我使用名字和姓氏是因为我更容易编造数据。我的代码基本上由三个文件组成。这里是 app.component.ts

import { Component, OnInit } from "@angular/core";
import { Person } from "./Person";

@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
name = "Angular";
people: Person[] = [
    { firstName: "john", lastName: "smith" },
    { firstName: "john", lastName: "pane" },
    { firstName: "john", lastName: "sander" },
    { firstName: "joe", lastName: "smith" },
    { firstName: "joe", lastName: "pane" },
    { firstName: "joe", lastName: "sander" },
    { firstName: "sue", lastName: "smith" },
    { firstName: "sue", lastName: "pane" },
    { firstName: "sue", lastName: "sander" },
    { firstName: "alice", lastName: "smith" },
    { firstName: "alice", lastName: "pane" },
    { firstName: "alice", lastName: "sander" },
    { firstName: "sally", lastName: "smith" },
    { firstName: "fred", lastName: "smith" },
    { firstName: "ted", lastName: "smith" },
    { firstName: "karl", lastName: "jones" },
    { firstName: "karl", lastName: "dowd" },
    { firstName: "tom", lastName: "brown" }
];
firstNameSet = new Set<string>();
lastNameSet = new Set<string>();
ngOnInit() {
    this.people.forEach(person => this.firstNameSet.add(person.firstName));
    this.people.forEach(person => this.lastNameSet.add(person.lastName));
}
firstChanged(event) {
    let first = event.target.value;
    this.lastNameSet.clear();
    let firstArray = this.people.filter(person => person.firstName === first);
    firstArray.forEach(person => this.lastNameSet.add(person.lastName));
}
lastChanged(event) {
    let last = event.target.value;
    this.firstNameSet.clear();
    let lastArray = this.people.filter(person => person.lastName === last);
    lastArray.forEach(person => this.firstNameSet.add(person.firstName));
}
reset(firstSelect, lastSelect) {
    firstSelect.selectedIndex = 0;
    lastSelect.selectedIndex = 0;
    this.people.forEach(person => this.firstNameSet.add(person.firstName));
    this.people.forEach(person => this.lastNameSet.add(person.lastName));
}
}

这里是 app.component.html

    <hello name="{{ name }}"></hello>
<form>
    <select #firstSelect (change)="firstChanged($event)">
        <option value="firstName">firstName</option>
        <option *ngFor="let first of firstNameSet;" value="{{first}}">
            {{first}}</option>
    </select>
    <select #lastSelect (change)="lastChanged($event)">
        <option value="lastName">lastName</option>
        <option *ngFor="let last of lastNameSet;" value="{{last}}">
            {{last}}</option>
    </select>
    <button type="button" (click)="reset(firstSelect, lastSelect)">Reset</button
 </form>

这里是 Person.ts

    export interface Person {
    firstName: string;
    lastName: string;
}

【讨论】：

【解决方案2】：

html文件

 <label>Country:</label> 
    <select [(ngModel)]="selectedCountry.id" (change)="onSelect($event.target.value)">
      <option value="0">--Select--</option>
      <option *ngFor="let country of countries" value= {{country.id}}>{{country.name}}</option>
    </select>

<div>
<label>State:</label>
<select>
  <option value="0">--Select--</option>
  <option *ngFor="let state of states " value= {{state.id}}>{{state.name}}</option>
</select>
</div>

服务文件

getCountries() {
    return [
     new Country(1, 'USA' ),
     new Country(2, 'India' ),
    ];
  }

  getStates() {
   return [
     new State(1, 1, 'Arizona' ),
     new State(2, 1, 'Alaska' ),
     new State(3, 1, 'Florida'),
     new State(4, 1, 'Hawaii'),
     new State(5, 2, 'Delhi' ),
     new State(6, 2, 'Kerala'),
     new State(7, 2, 'Mumbai' )
    ];
  }

ts 文件

countries: Country[];
  states: State[];

  constructor(private selectService: SelectService) { }

  ngOnInit() {
    this.countries = this.selectService.getCountries();
    this.onSelect(this.selectedCountry.id);
  }

  onSelect(countryid) {
    this.states = this.selectService.getStates().filter((item) => item.countryid == countryid);
  }

【讨论】：