typescript - 角度材料自动完成有此错误“错误错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。”

Question

我想要做的是我的表格将有一个用于插入产品代码的输入字段，并且输入字段也可以搜索产品。

但是当我刷新页面时，会出现错误，请问是什么问题？我是 Angular 9 的新手

HTML

<tr *ngFor="let item of dataSource" cdkDrag cdkDragLockAxis="y">
....

<input class="form-control" [(ngModel)]="item.code" type="text" placeholder="Code" name="Code"
                            matInput
                            [formControl]="myControl"
                            [matAutocomplete]="auto">
                            <mat-autocomplete #auto="matAutocomplete">
                                <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                                  {{option}}
                                </mat-option>
                            </mat-autocomplete>
    ... <tr>

打字稿

import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
...
...
dataSource = [
    {
      index: 1,
      name: 'abc',
      code: 'abc',
      desc: 'abc',
      qty: 1,
      unit: 'abc',
      price: 1.00,
      tax: 'abc',
      amount: 1
    },
    {
      index: 2,
      name: 'abc2',
      code: 'abc2',
      desc: 'abc2',
      qty: 2,
      unit: 'abc2',
      price: 2.00,
      tax: 'abc2',
      amount: 2
}];
myControl = new FormControl();
  options: string[] = ['One', 'Two', 'Three'];
  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }

标签： typescriptangular-materialangular9angular-material-table