Angular中Mat-select二级选项选中后值不更新问题求助

我在Angular应用中实现了以下功能：选择国家后加载对应州列表，选择州后该值需显示在Mat-select中。目前州选择逻辑已实现，但选中值无法正常更新。相关代码如下：

HTML代码 #

<mat-form-field appearance="fill" class="full-width">
  <mat-select placeholder="Select Country/State" [(value)]="selectedValue" #countryStateSelect (openedChange)="onDropdownOpen($event)">
    <div class="dropdown-container">
      <div class="dropdown-column">
        <mat-option *ngFor="let country of countries" (click)="onCountrySelect(country, countryStateSelect)">
          {{ country.country }}
        </mat-option>
      </div>
      <div class="dropdown-column" *ngIf="selectedCountry">
        <mat-option *ngFor="let state of selectedCountry.states" [value]="state.state" (click)="onStateSelect(state.state, countryStateSelect)">
          {{ state.state }}
        </mat-option>
      </div>
    </div>
  </mat-select>
</mat-form-field>

TypeScript代码 #

import { Component } from '@angular/core';
import { VERSION } from '@angular/material';
import { NavItem } from './nav-item';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  selectedCountry: any = null;
  selectedValue: string = '';

  countries = [
    {
      "country": "India",
      "states": [
        { "state": "AP" },
        { "state": "TG" },
        { "state": "UP" },
        { "state": "GA" }
      ]
    },
    {
      "country": "USA",
      "states": [
        { "state": "TA" },
        { "state": "MG" },
        { "state": "NC" },
        { "state": "NY" }
      ]
    },
    {
      "country": "Canada",
      "states": [
        { "state": "ON" },
        { "state": "BC" }
      ]
    }
  ];

  onCountrySelect(country: any, select: MatSelect) {
    this.selectedCountry = country;
    select.open();
  }

  onStateSelect(state: string, select: MatSelect) {
    this.selectedValue = state;
    this.selectedCountry = null;
    select.close();
  }

  onDropdownOpen(isOpen: boolean) {
    if (!isOpen) {
      this.selectedCountry = null;
    }
  }
}

问题原因 #

点击州的mat-option时，MatSelect内置的选中逻辑会在自定义click事件之后触发。而你在onStateSelect里立刻将selectedCountry设为null，导致对应的MatOption被销毁，MatSelect找不到匹配的选项值，因此无法更新显示。

修复方案 #

统一使用MatSelect的selectionChange事件处理选中逻辑，避免自定义事件与组件内置逻辑冲突：

修改后的HTML代码

<mat-form-field appearance="fill" class="full-width">
  <mat-select placeholder="Select Country/State" [(value)]="selectedValue" #countryStateSelect 
              (openedChange)="onDropdownOpen($event)" (selectionChange)="onOptionSelect($event, countryStateSelect)">
    <div class="dropdown-container">
      <div class="dropdown-column">
        <mat-option *ngFor="let country of countries" [value]="null">
          {{ country.country }}
        </mat-option>
      </div>
      <div class="dropdown-column" *ngIf="selectedCountry">
        <mat-option *ngFor="let state of selectedCountry.states" [value]="state.state">
          {{ state.state }}
        </mat-option>
      </div>
    </div>
  </mat-select>
</mat-form-field>

修改后的TypeScript代码

import { Component } from '@angular/core';
import { VERSION } from '@angular/material';
import { MatSelect, MatSelectChange } from '@angular/material/select';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  selectedCountry: any = null;
  selectedValue: string = '';

  countries = [
    {
      "country": "India",
      "states": [
        { "state": "AP" },
        { "state": "TG" },
        { "state": "UP" },
        { "state": "GA" }
      ]
    },
    {
      "country": "USA",
      "states": [
        { "state": "TA" },
        { "state": "MG" },
        { "state": "NC" },
        { "state": "NY" }
      ]
    },
    {
      "country": "Canada",
      "states": [
        { "state": "ON" },
        { "state": "BC" }
      ]
    }
  ];

  onOptionSelect(event: MatSelectChange, select: MatSelect) {
    const selectedText = event.source.selected.viewValue;
    const matchedCountry = this.countries.find(c => c.country === selectedText);
    
    if (matchedCountry) {
      this.selectedCountry = matchedCountry;
      setTimeout(() => select.open()); // 延迟打开，确保州列表DOM渲染完成
    } else {
      this.selectedValue = selectedText;
      this.selectedCountry = null;
    }
  }

  onDropdownOpen(isOpen: boolean) {
    if (!isOpen) {
      this.selectedCountry = null;
    }
  }
}

关键修复点

1. 移除所有mat-option上的click事件，改用MatSelect的selectionChange统一处理选中逻辑。
2. 国家选项设置[value]="null"，避免选中国家时误更新selectedValue。
3. 使用setTimeout延迟打开下拉框，确保州列表DOM已渲染完成，用户可直接选择州。
4. 合并原有的onCountrySelect和onStateSelect为onOptionSelect，逻辑更简洁清晰。

内容的提问来源于stack exchange，提问作者Nagarjuna Reddy