Angular绑定复杂对象时如何默认选中select下拉框第一个元素

出现这个问题的核心原因是Angular的ngValue绑定对象时，默认通过对象引用进行匹配，你初始化时selectedObject为undefined，无法匹配到数组里的任何选项，所以出现空默认值。以下是两种可行的解决方案：

方案1：输入数组加载完成后直接赋值第一个对象 #

这是最直接的解决方案，直接把数组第一个对象的引用赋值给selectedObject，完全匹配ngValue的引用匹配规则：

1. 在组件类中监听myArray的输入变化，数组有值时初始化选中项：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  // 你的原有组件配置
})
export class MyComponent implements OnChanges {
  @Input() myArray: any[];
  private selectedObject: any;

  ngOnChanges(changes: SimpleChanges): void {
    // 仅当myArray发生变化、数组有值且当前无选中对象时才初始化默认值
    if (changes['myArray'] && this.myArray?.length && !this.selectedObject) {
      this.selectedObject = this.myArray[0];
    }
  }
}

如果你的myArray是同步传入、不会后续变更的，也可以直接在ngOnInit生命周期里赋值，不需要用ngOnChanges。

方案2：使用compareWith自定义匹配规则（适用非同源对象场景） #

如果你的初始选中对象可能不是直接从myArray中取的、引用不一致的情况，可以通过compareWith自定义按属性匹配，不用依赖引用一致：

1. 模板中给select添加compareWith绑定：

<select [(ngModel)]="selectedObject" [compareWith]="compareObject">
    <option *ngFor="let object of myArray;" [ngValue]="object">{{object.property1}}</option>
</select>

2. 组件类中添加匹配函数：

// 按property1属性匹配两个对象是否相等
compareObject(obj1: any, obj2: any): boolean {
  return obj1?.property1 === obj2?.property1;
}

这种场景下你初始化时就算手动赋值selectedObject = {property1: 'a', property2: 'b'}，哪怕和myArray里的第一个对象引用不同，也能正常匹配到默认选中项。

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