Angular中根据mat-select选中值动态修改mat-label内的国旗图标

问题原因 #

Angular Material对mat-form-field的浮动标签做了渲染优化，选中值后默认的变更检测周期没有触发mat-label内动态class的重新计算，所以图标没有更新。下拉选项的图标渲染在独立的overlay层，不受该优化影响因此展示正常。

解决方案1（手动触发变更检测，改动最小） #

1. 给mat-select绑定官方的selectionChange事件，移除mat-option上的click事件（避免事件触发时机异常）
2. 组件内注入ChangeDetectorRef，选中值变更后手动触发变更检测
3. 优先用[ngClass]绑定动态多class，稳定性优于[class]字符串绑定

修改后的代码

HTML：

<mat-form-field>
  <mat-label>
    <span [ngClass]="getLanguageFlag(selectedLanguage)"></span>
    {{ selectedLanguage }}
  </mat-label>

  <mat-select
    [(ngModel)]="selectedLanguage"
    name="selectedLanguage"
    id="selectedLanguage"
    (selectionChange)="changeLanguage($event.value)"
  >
    <mat-option
      *ngFor="let language of languages"
      [value]="language"
    >
      <span [ngClass]="getLanguageFlag(language)"></span>
      {{ language }}
    </mat-option>
  </mat-select>
</mat-form-field>

TS：

import { ChangeDetectorRef } from '@angular/core';

// 其余导入保持不变

selectedLanguage: string = environment.defaultLanguage;

constructor(
  private store: Store<State>,
  private translateService: TranslateService,
  private cdr: ChangeDetectorRef // 注入变更检测器
) {}

changeLanguage(language: string): void {
  this.selectedLanguage = language;
  this.cdr.detectChanges(); // 手动触发视图更新
}

getLanguageFlag(language: string): string {
  let style = 'flag-icon flag-icon-';
  return language === 'en' ? `${style}gb` : `${style}${language}`;
}

解决方案2（变量绑定，性能更优） #

避免变更检测时重复执行class计算函数，直接绑定预存的class变量：
TS新增逻辑：

selectedFlagClass: string = '';

ngOnInit() {
  // 初始化默认国旗class
  this.selectedFlagClass = this.getLanguageFlag(this.selectedLanguage);
}

changeLanguage(language: string): void {
  this.selectedLanguage = language;
  // 选中变更时同步更新国旗class
  this.selectedFlagClass = this.getLanguageFlag(language);
}

HTML修改绑定对象：

<mat-label>
  <span [ngClass]="selectedFlagClass"></span>
  {{ selectedLanguage }}
</mat-label>

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