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

Question

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

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

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

如果我的解释不清楚，我会在此处包含设计。

预先感谢您的任何帮助。我是学习Angular的新手。任何建议将被认真考虑！

下拉菜单设计：

标签： angulardropdown

Answer 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;
}