Push to FormArray не обновляет mat-таблицу - PullRequest
Новая
       24

Push to FormArray не обновляет mat-таблицу

0 голосов
/ 01 марта 2019

У меня есть FormGroup с FormArray и mat-таблица, которая отображает массив.Когда я добавляю новую FormGroup в FormArray, таблица mat не добавляет новую строку.

Я пытался объявить trackBy, но я не знаю, где (и, если честно, ни почему).

component.html: 

<form [formGroup]="formGroup">
    <div formArrayName="items">
        <button mat-raised-button (click)="addNew()">New Case</button>

        <table mat-table [dataSource]="items.controls">
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

            <ng-container matColumnDef="itemKey">
                <mat-header-cell *matHeaderCellDef> Key </mat-header-cell>
                <mat-cell *matCellDef="let item; let i = index" [formGroupName]="i">
                    <mat-form-field> 
                        <input formControlName="itemKey" matInput />
                    </mat-form-field>
                </mat-cell>
            </ng-container>

иcomponent.ts: 

formGroup = new FormGroup({
   items: new FormArray()
});

get items() { return this.formGroup.get("items") as FormArray }


addNew() {
  this.items.push(new FormGroup({
    itemKey: new FormControl(),
    itemName: new FormControl()
  }));
}

1 Ответ

0 голосов
/ 01 марта 2019

Поскольку таблица оптимизируется по производительности, она не будет автоматически проверять изменения в массиве данных.Вместо этого, когда объекты добавляются, удаляются или перемещаются в массив данных, вы можете инициировать обновление отображаемых строк таблицы, вызывая ее метод renderRows ().

Если предоставляется массив данных,таблица должна быть уведомлена, когда объекты массива добавляются, удаляются или перемещаются.Это можно сделать, вызвав функцию renderRows (), которая будет отображать diff с момента последней таблицы.Если ссылка на массив данных изменяется, таблица автоматически запускает обновление строк.

https://material.angular.io/components/table/api#MatTable

Попробуйте выполнить следующее. 

@ViewChild(MatTable) _matTable:MatTable<any>;

 addNew() {
    this.items.push(new FormGroup({
      itemKey: new FormControl(),
      itemName: new FormControl()
    }));
    this._matTable.renderRows();
  }
...