Angular: 检查后表达式发生了变化。先前值：'undefined'。当前值：'[object Object]'

Question

我在将 angular 和依赖项升级到更新版本后遇到问题。

该应用程序像以前一样工作，但我在控制台中看到一条我以前没有的错误消息：

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'.

似乎我在使用 'core-js' 的更新版本时遇到了这个问题。

在网上查了一下，好像是@ViewChild用于autocomplete的错误，但我不明白是什么问题。此外，似乎导致此错误的代码是以下代码：

在第一个组件的 html 中，我使用了一个具有自动完成功能的组件：

<mat-form-field>
  <mat-placeholder>...</mat-placeholder>
  <input class="t-myClass" type="text" matInput
    [formControl]="myFormGroup.controls['myField']" (change)="resetValidity()"
    [matAutocomplete]="myAutocomplete.autocomplete" #myField>
  <app-my-autocomplete #myAutocomplete="appMyAutocomplete"
    [inputFormControl]="myFormGroup.controls['myField']" [inputElement]="myField">
  </app-my-autocomplete>
</mat-form-field>

在带有自动完成组件的组件中我有这个：

export class MyAutocompleteComponent implements OnInit, OnChanges, OnDestroy {

  @Input()
  inputFormControl: FormControl;

  @Input()
  inputElement: HTMLInputElement;

  @ViewChild('autocomplete')
  autocomplete: MatAutocomplete;

  filteredObjects: Observable<MyElement[]>;

  //inputFormSubscription: Subscription;

  constructor(
    private myElementService: MyElementService,
    ...
  ) { }

  ngOnChanges() {
    
  }

  onSelection() {
    if (this.inputElement) {
      // Need to create a timeout cause the input is selected just after the option selection
      setTimeout(() => {
        this.inputElement.blur();
      }, 0);
    }
  }

  ngOnInit() {
    //this.inputFormSubscription = this.inputFormControl.valueChanges.subscribe(val => this.filteredObjects = this.geographyElementService.getGeographyElements(val));
    this.filteredObjects = this.inputFormControl.valueChanges.pipe(switchMap(val => this.geographyElementService.getGeographyElements(val)));
  }

  ngOnDestroy() {
    //this.inputFormSubscription.unsubscribe();
  }

  ...
}

与此组件关联的 html（具有自动完成功能）是：

<mat-autocomplete #autocomplete [displayWith]="label.bind(this)" panelWidth="240px">
    <mat-option *ngFor="let object of filteredObjects | async " [value]="object" (onSelectionChange)="onSelection()">
        {{ object.code }} - {{ object.description }}
    </mat-option>
</mat-autocomplete>

调试的时候发现错误对应的current value是一个MatAutocomplete对象所以好像确认是这段代码但是我不明白为什么因为代码是可以运行的

你能帮我解决这个问题吗？

编辑：我根据给出的答案更新了代码，但错误仍然存在。

Answer 1

解决方案是使用值为 true 的静态自动完成：

@ViewChild('autocomplete', { static: true })
autocomplete: MatAutocomplete;

Angular: 检查后表达式发生了变化。先前值：'undefined'。当前值：'[object Object]'

Angular: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'

angular

core-js