Angular Autocomplete初始值问题：mat-option未默认选中求解决方案

为表单控件设置初始值时，mat-autocomplete下拉面板中的mat-option默认未被选中：

• 实际表现：
• 期望表现：

尝试通过autocomplete引用，在afterViewInit钩子中获取MatOption的QueryList并调用select()方法选中对应选项，但触发了变更检测错误：ExpressionChangeAfterItHasBeenCheckedError，寻求可行的解决思路。

1. 异步延迟执行选中逻辑 #

将选中操作放入异步队列，避开Angular的变更检测周期：

import { Component, AfterViewInit, ViewChild, ViewChildren } from '@angular/core';
import { MatAutocomplete } from '@angular/material/autocomplete';
import { MatOption } from '@angular/material/core';
import { FormControl } from '@angular/forms';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild(MatAutocomplete) autocomplete!: MatAutocomplete;
  @ViewChildren(MatOption) options!: QueryList<MatOption>;
  yourFormControl = new FormControl('初始值');

  ngAfterViewInit(): void {
    setTimeout(() => {
      const targetOption = this.options.find(opt => opt.value === this.yourFormControl.value);
      targetOption?.select();
    });
  }
}

2. 手动触发变更检测 #

注入ChangeDetectorRef，在选中操作后手动完成变更检测：

import { Component, AfterViewInit, ViewChild, ViewChildren, ChangeDetectorRef } from '@angular/core';
import { MatAutocomplete } from '@angular/material/autocomplete';
import { MatOption } from '@angular/material/core';
import { FormControl } from '@angular/forms';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild(MatAutocomplete) autocomplete!: MatAutocomplete;
  @ViewChildren(MatOption) options!: QueryList<MatOption>;
  yourFormControl = new FormControl('初始值');

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit(): void {
    const targetOption = this.options.find(opt => opt.value === this.yourFormControl.value);
    targetOption?.select();
    this.cdr.detectChanges();
  }
}

3. 初始化时关联表单值与选项 #

确保表单初始值与mat-option的value严格匹配，结合面板打开操作完成选中：

import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { MatAutocomplete } from '@angular/material/autocomplete';
import { MatOption } from '@angular/material/core';
import { FormControl } from '@angular/forms';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  @ViewChild(MatAutocomplete) autocomplete!: MatAutocomplete;
  @ViewChildren(MatOption) options!: QueryList<MatOption>;
  yourFormControl = new FormControl('');
  initialValue = '预设的初始值';

  ngOnInit(): void {
    this.yourFormControl.setValue(this.initialValue);
    setTimeout(() => {
      this.autocomplete.open();
      const targetOption = this.options.find(opt => opt.value === this.initialValue);
      targetOption?.select();
    });
  }
}

4. 通过AutocompleteTrigger控制面板 #

借助MatAutocompleteTrigger打开面板后再执行选中：

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
import { MatOption } from '@angular/material/core';
import { FormControl } from '@angular/forms';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild(MatAutocomplete) autocomplete!: MatAutocomplete;
  @ViewChild(MatAutocompleteTrigger) trigger!: MatAutocompleteTrigger;
  @ViewChildren(MatOption) options!: QueryList<MatOption>;
  yourFormControl = new FormControl('初始值');

  ngAfterViewInit(): void {
    this.trigger.openPanel();
    setTimeout(() => {
      const targetOption = this.options.find(opt => opt.value === this.yourFormControl.value);
      targetOption?.select();
    });
  }
}

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