Angular 级联垫-select 下拉菜单

Question

我正在尝试制作一个 mat-select 级联下拉列表。问题是，当我单击“国家/地区”下拉菜单和 select 一个选项时，它不会显示为 selected，所以我什至无法测试整个级联下拉菜单。

依赖下拉列表-component.html:

<div class="content">
<mat-form-field appearance="outline">
    <mat-label>Country</mat-label>
    <mat-select [(ngModel)]="selectedCountry" (change)="changeCountry($event)">
        <mat-option *ngFor="let country of Countries">{{country.name}}</mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field appearance="outline">
    <mat-label>State</mat-label>
    <mat-select (change)="changeState($event)">
        <mat-option *ngFor="let state of states">{{state.name}}</mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field appearance="outline">
    <mat-label>City</mat-label>
    <mat-select>
        <mat-option *ngFor="let city of cities">{{city}}</mat-option>
    </mat-select>
</mat-form-field>

依赖下拉列表-component.ts:

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-dependent-dropdown',
  templateUrl: './dependent-dropdown.component.html',
  styleUrls: ['./dependent-dropdown.component.css']
})

export class DependentDropdownComponent implements OnInit {
  constructor(private title: Title) { }

  ngOnInit() { }

  selectedCountry: String = "ChooseCountry";

  Countries: Array<any> = [
    {
      name: 'Romania',
      states: [
        {
          name: 'Cluj',
          cities: ['Cluj-Napoca', 'Dej', 'Gherla']
        },
        {
          name: 'Sibiu',
          cities: ['Sibiu', 'Avrig', 'Cisnadie']
        },
        {
          name: 'Satu Mare',
          cities: ['Baia-Mare', 'Satu-Mare', 'Carei']
        },
      ]
    },

    {
      name: 'United States',
      states: [
        {
          name: 'Washington',
          cities: ['Seattle', 'Vancouver', 'Kent']
        },
        {
          name: 'Texas',
          cities: ['Houston', 'El Paso', 'Dallas']
        },
        {
          name: 'California',
          cities: ['Los Angeles', 'San Francisco', 'San Diego']
        },
      ]
    },
  ];

  states: Array<any> = [];
  cities: Array<any> = [];

  changeCountry(country: any) {
    this.states = this.Countries.find((cntry: any) => cntry.name == country.target.value).states;
  }

  changeState(state: any) {
    this.cities = this.Countries.find((cntry: any) => cntry.name == this.selectedCountry).states.find((stat: any) => stat.name == state.target.value).cities;
  }
}

来源：https://roytuts.com/cascading-or-dependent-dropdown-using-angular/

Answer 1

我在这里注意到的第一个问题是您在 mat-option 上没有 value 属性。这就是所选国家/地区不会保持选中状态的原因。要解决这个问题，请在 mat-option 上添加 [value]="country" 绑定（其他下拉菜单也是如此）。其次，mat-select 似乎没有发出任何 change 事件。查看 the docs 我猜你正在寻找 valueChange 事件。

<div class="content">
  <mat-form-field appearance="outline">
    <mat-label>Country</mat-label>
    <mat-select [(ngModel)]="selectedCountry" (valueChange)="changeCountry($event)">
      <mat-option *ngFor="let country of Countries" [value]="country">{{
        country.name
      }}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label>State</mat-label>
    <mat-select (valueChange)="changeState($event)">
      <mat-option *ngFor="let state of states" [value]="state">{{ state.name }}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label>City</mat-label>
    <mat-select>
      <mat-option *ngFor="let city of cities" [value]="city">{{ city }}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

事件处理程序也可以更简单一些：

changeCountry(country: any) {
  this.states = country.states;
  this.cities = [];
}

changeState(state: any) {
  this.cities = state.cities;
}

Angular 级联垫-select 下拉菜单

Angular cascading mat-select dropdowns

angular

typescript

drop-down-menu

cascadingdropdown

mat-select