Angular中如何将对象绑定到*ngFor数组，实现select匹配对象？

问题核心：Angular的ngModel绑定对象时，默认使用引用相等判断选中状态。即使两个对象内容完全一致，只要不是同一内存引用，下拉框就无法识别为选中状态。

方法一：直接引用列表中的目标对象 #

初始化current时，从data.questions中找到对应内容的对象，确保引用一致。

修改组件代码：

export class App implements OnInit {
  name = 'Angular';
  current!: { question: string; answer: string };

  data = {
    title: 'Select your question from the list',
    questions: [
      { question: 'q1', answer: '' },
      { question: 'q2', answer: '' },
      { question: 'q3', answer: '' },
      { question: 'q4', answer: '' },
      { question: 'q5', answer: '' },
      { question: 'q6', answer: '' },
      { question: 'q7', answer: '' },
      { question: 'q8', answer: '' },
    ],
  };

  ngOnInit() {
    // 根据question属性匹配，获取原列表中的对象引用
    this.current = this.data.questions.find(q => q.question === 'q3') || { question: '', answer: '' };
  }
}

方法二：使用compareWith自定义匹配逻辑 #

如果无法直接引用原列表对象（比如current来自外部接口或其他数据源），可以通过compareWith属性自定义对象匹配规则，基于对象内容而非引用判断。

1. 修改模板中的select元素，添加[compareWith]绑定：

<select
  style="border:3px solid blue;"
  [(ngModel)]="current"
  name="selectedQuestion"
  [compareWith]="compareQuestions"
>
  <option>Select your question</option>
  <option *ngFor="let question of data?.questions" [ngValue]="question">{{ question?.question }}</option>
</select>

2. 在组件类中实现匹配方法：

export class App {
  name = 'Angular';
  current = { question: 'q3', answer: '' };

  data = {
    title: 'Select your question from the list',
    questions: [
      { question: 'q1', answer: '' },
      { question: 'q2', answer: '' },
      { question: 'q3', answer: '' },
      { question: 'q4', answer: '' },
      { question: 'q5', answer: '' },
      { question: 'q6', answer: '' },
      { question: 'q7', answer: '' },
      { question: 'q8', answer: '' },
    ],
  };

  // 自定义匹配规则：比较question属性值
  compareQuestions(a: { question: string }, b: { question: string }): boolean {
    // 处理null/undefined情况
    return a && b ? a.question === b.question : a === b;
  }
}

两种方法对比：

• 方法一简单直接，适合能直接获取原列表对象的场景；
• 方法二更灵活，适用于current无法直接引用原列表对象的复杂场景。

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