表* ngFor中的mat-autocomplete。错误：ERROR错误：ExpressionChangedAfterItHasBeenCheckedError

Question

实际上，我正在使用角度5和材质2。

我有一个用* ngFor填充的表，其中的一个组成部分是“ mat-autocomplete”。我遇到的问题是，当我已经加载了自动完成功能中的一个值，然后将另一个项目添加到列表中时，我在列表中现有记录的所有自动完成功能中具有的值都被删除了，我必须重新加载它们。接下来，我添加HTML和Typescript代码

HTML：

<tbody>
                  <tr *ngFor="let pedidoEntregaDetalle of pedidoEntregaDetalles;let i = index">
                    <td>{{pedidoEntregaDetalle.stock.producto.codigo}}</td>
                    <td>{{pedidoEntregaDetalle.stock.producto.marca.descripcion}}</td>
                    <td>{{pedidoEntregaDetalle.stock.producto.modelo}}</td>
                    <td>
                      <span *ngIf="pedidoEntregaDetalle.id !== null">{{pedidoEntregaDetalle.stock.producto.descripcion}}</span>
                      <mat-form-field *ngIf="pedidoEntregaDetalle.id === null">
                        <input class="form-control" type="text" aria-label="Number" matInput [formControl]="myControlStock"
                          [matAutocomplete]="autoStock" [(ngModel)]="pedidoEntregaDetalle.stock" 
                          name="autoStock{{i}}">
                        <mat-autocomplete #autoStock="matAutocomplete" [displayWith]="getDisplayFnStock()">
                          <mat-option *ngFor="let stock of filteredStocks | async" [value]="stock" (onSelect)="selectedStock(stock)">
                            {{stock.producto.codigo}} - {{stock.producto.marca.descripcion}} -
                            {{stock.producto.modelo}} - {{stock.producto.descripcion}}
                          </mat-option>
                        </mat-autocomplete>
                      </mat-form-field>
                    </td>
                    <td>
                      <input class="form-control" #cantidad="ngModel" name="cantidad{{i}}" [(ngModel)]="pedidoEntregaDetalle.cantidad"
                        type="number" required min="0" (blur)="validaCantidad(pedidoEntregaDetalle)">
                    </td>
                    <td>
                      <button type="button" class="btn btn-danger" (click)="removeDetalle(i)">
                        <i class="fa fa-eraser"></i></button>
                    </td>
                  </tr>
                </tbody>

TS：

///////// autocomplete Stock /////////////////


autoStock() {
    this.filteredStocks = this.myControlStock.valueChanges
      .pipe(
        startWith(''),
        map(val => this.filterStock(val))
      );
  }
  filterStock(val) {
    if (typeof val === 'undefined') {
      this.valStrStock = "";
    } else {
      if (typeof val.producto === 'undefined') {
        this.valStrStock = val;
      } else {
        this.valStrStock = val.producto.descripcion;
      }
    }
    if (typeof this.valStrStock !== 'undefined') {
      if (this.stocks) {
        return this.stocks.filter(stock =>
          stock.producto.codigo.toLowerCase().includes(this.valStrStock.toLowerCase()) ||
          (
            stock.producto.sidico !== null &&
            stock.producto.sidico.toLowerCase().includes(this.valStrStock.toLowerCase())
          ) ||
          stock.producto.modelo.toLowerCase().includes(this.valStrStock.toLowerCase()) ||
          stock.producto.marca.descripcion.toLowerCase().includes(this.valStrStock.toLowerCase()) ||
          stock.producto.descripcion.toLowerCase().includes(this.valStrStock.toLowerCase())
        );
      }
    }
  }

  public getDisplayFnStock() {
    return (val) => this.displayStock(val);
  }

  private displayStock(stock): string {
    return stock ? stock.producto.descripcion : stock;
  }

  private selectedStock(stock) {
    console.log(stock);
  }



/////////Fin autocomplete Stock //////////////////////////////////////