Angular中设置FormControl值后mat-select显示空白问题求助

mat-select控件表单值已正确设置，但界面显示空白，核心原因是对象引用不匹配：你从后端获取的address对象与assosiatedAddresses数组中的地址对象是不同实例，mat-select默认通过严格相等（===）匹配选项与表单值，即便属性完全一致，引用不同也无法选中对应选项。

解决方案1：使用compareWith自定义匹配逻辑（推荐） #

通过compareWith函数指定基于唯一标识（如id）的匹配规则，替代默认的对象引用匹配。

步骤： #

1. 在组件类中定义比较函数：

compareAddresses(a: any, b: any): boolean {
  // 处理null/undefined情况，同时通过id判断是否为同一地址
  return a && b ? a.id === b.id : a === b;
}

2. 在模板的mat-select上绑定该函数：

<mat-form-field *ngIf="useSubstituteAddress" class="contact-form">
  <mat-label>Ersatz Adresse</mat-label>
  <mat-select 
    [formControl]="contactDataForm.get('address')?.get('substituteAddress')! | asFormControl"
    [compareWith]="compareAddresses"
  >
    <mat-option *ngFor="let address of assosiatedAddresses" [value]="address">
      {{address.postalcode}} {{address.city}}, {{address.street}} {{address.housenumber}}
    </mat-option>
  </mat-select>
</mat-form-field>

解决方案2：从本地数组匹配对象后赋值 #

不直接使用后端返回的address对象，而是从已加载的assosiatedAddresses数组中找到id匹配的对象，再赋值给表单控件：

if (this.contactData.substituteAddress) {
  this.useSubstituteAddress = true;
  const targetId = Number(this.contactData.substituteAddress?.id);
  // 优先从本地数组匹配地址
  const matchedAddress = this.assosiatedAddresses.find(addr => addr.id === targetId);
  if (matchedAddress) {
    this.contactDataForm.get('address')?.get('substituteAddress')?.setValue(matchedAddress);
  } else {
    // 本地无匹配时再调用接口，后续可将新地址加入数组或结合compareWith使用
    this.addressService.getAddressById(targetId).subscribe((address) => {
      this.contactDataForm.get('address')?.get('substituteAddress')?.setValue(address);
    });
  }
}

额外注意事项 #

• 确保assosiatedAddresses数组在表单赋值前已加载完成，若数组为异步加载，需在数组加载完成后再执行赋值逻辑，或结合compareWith规避时序问题。
• 检查id的类型一致性：比如后端返回id为字符串，而你转为数字，但数组中id仍为字符串，会导致===匹配失败，需统一类型。

内容的提问来源于stack exchange，提问作者Joel Mulé