мат-автозаполнение в таблице * ngFor. Ошибка: ошибка: ExpressionChangedAfterItHasBeenCheckedError - PullRequest
Новая
       7

мат-автозаполнение в таблице * ngFor. Ошибка: ошибка: ExpressionChangedAfterItHasBeenCheckedError

0 голосов
/ 07 ноября 2018

На самом деле я работаю с угловым 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 //////////////////////////////////////
...