mat-select组件compareWith仅鼠标悬停按钮时触发的异常问题咨询

我之前也碰到过完全一样的情况！这种异常本质上是Angular的变更检测机制没有在组件初始化时及时触发compareWith函数，而鼠标悬停操作刚好触发了视图的变更检测，才让选中值的匹配逻辑跑起来，所以悬停后就正常显示了。

可能的原因 #

1. 初始值设置时机或类型不匹配：

   • 如果你的formControl初始值是异步获取的（比如从API拉取），组件渲染时可能值还没到位，导致compareWith一开始没东西可对比；
   • 你的compareFn参数类型可能和formControl存储的值不匹配：比如formControl存的是OptionModel对象，但你把c2定义成了string，或者反过来，这会导致对比逻辑失效。

2. 变更检测策略限制：
   如果组件用了ChangeDetectionStrategy.OnPush，Angular只会在输入属性变化或事件触发时才更新视图，初始值设置如果没触发变更检测，就不会调用compareWith。

具体解决方案 #

1. 修正compareFn的参数类型 #

先确认你的formControl存储的是OptionModel对象数组还是id字符串数组，然后对应调整compareFn：

• 如果存的是OptionModel对象：

  compareFn(c1: OptionModel, c2: OptionModel): boolean {
    // 用可选链避免空值报错
    return c1?.id === c2?.id;
  }
  

• 如果存的是id字符串数组：

  compareFn(c1: OptionModel, c2: string): boolean {
    return c1?.id === c2;
  }
  

2. 确保初始值及时设置并触发变更检测 #

如果初始值是异步获取的，在赋值后手动触发变更检测：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  yourForm: FormGroup;
  options: OptionModel[] = [];

  constructor(
    private fb: FormBuilder,
    private cdr: ChangeDetectorRef // 注入变更检测器
  ) {}

  ngOnInit(): void {
    this.yourForm = this.fb.group({
      options: [] // 初始值可以先设为空数组
    });

    // 模拟异步获取初始选中值
    this.getInitialSelectedOptions().subscribe(selectedValues => {
      this.yourForm.get('options')?.setValue(selectedValues);
      // 手动触发变更检测，强制Angular更新视图
      this.cdr.detectChanges();
    });
  }

  // 你的compareFn...
}

3. 检查变更检测策略 #

如果组件用了OnPush，除了手动调用detectChanges，也可以把初始值作为输入属性传递，或者用async管道绑定，让Angular自动触发变更检测。

额外小提示 #

可以在compareFn里加个console.log，看看组件初始化时有没有被调用，这样能快速定位是没触发对比还是对比逻辑有问题。

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