Angular：表达式在检查后发生了变化。以前的值：'未定义'。当前值：'[对象对象]'

Question

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

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

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

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

在互联网上搜索后，似乎@ViewChild 用于自动完成时会出现错误，但我不明白出了什么问题。此外，似乎导致此错误的代码如下：

• 在第一个组件的 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>

在调试的时候发现错误对应的当前值是一个MatAutocomplete对象所以好像确认是这段代码但是不明白为什么，因为代码在工作。

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

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

Answer 1

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

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