Как создать взаимный каскадный выпадающий список в Angular 6+ (страна <-> город) - PullRequest
Новая
       15

Как создать взаимный каскадный выпадающий список в Angular 6+ (страна <-> город)

1 голос
/ 21 февраля 2020

Я нашел много примеров того, как создать раскрывающийся список каскадирования, который выбирает страну и фильтрует состояние. Но есть ли способ сделать взаимозависимую фильтрацию.

Как мы можем из списка стран и фильтра города, а также из страны списка фильтра страны.

Потому что сейчас у меня есть два раскрывающихся меню, и данные в двух раскрывающихся меню связаны между собой. Функция, которую я хочу достичь, заключается в том, чтобы при выборе одного элемента в первом (или втором) раскрывающемся меню. Во втором (или первом) раскрывающемся списке элемент, связанный с меню, будет подсвечен.

Я включаю дизайн здесь на случай, если мое объяснение неясно.

Заранее благодарю за любую помощь. Я новичок в обучении Angular. Любой совет будет оценен!

Дизайн выпадающего меню: enter image description here

Ответы [ 2 ]

0 голосов
/ 21 февраля 2020

Я написал демонстрационный проект на 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;
}
0 голосов
/ 21 февраля 2020

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);
  }
...