Добавить динамически столбец в mat-таблицу и по клику встроить изменить заголовок столбца

Question

Я пытаюсь построить таблицу материалов при нажатии кнопки. Я могу добавить / удалить столбцы и строки таблицы. Я пытаюсь добавить

displayedColumns: string[] = ['name', 'weight', 'symbol', 'position'];
  columnsToDisplay: string[] = this.displayedColumns.slice();
  data: PeriodicElement[] = ELEMENT_DATA;

  addColumn() {
    const randomColumn = Math.floor(Math.random() * this.displayedColumns.length);
    this.columnsToDisplay.push(this.displayedColumns[randomColumn]);
  }
 removeColumn() {
    if (this.columnsToDisplay.length) {
    this.columnsToDisplay.pop();
  }

Вот stackblitz

И я получаю добавить / удалить столбец, но я не могу получить встроенное редактирование. Есть ли способ заставить это работать?

Thnx

Answer 1

Одно возможное решение будет показывать ввод вместо метки ячейки при нажатии на эту ячейку. Затем с помощью директивы ngModel (https://angular.io/api/forms/NgModel) вы будете привязывать значение ввода непосредственно к массиву ELEMENT_DATA, что позволит вам увидеть изменения, непосредственно отраженные в таблице.

В вашем компоненте. html

    <table mat-table [dataSource]="data" class="mat-elevation-z8">
        <ng-container [matColumnDef]="column" 
         *ngFor="let column of displayedColumns; let columnIndex = index;">
            <th mat-header-cell *matHeaderCellDef> {{column}} </th>
            <td mat-cell *matCellDef="let element">
                <span (click)="onEdit(element.position, columnIndex)" 
            *ngIf="!cellEditting(element.position, columnIndex)">
            {{element[column]}}
          </span>
          <input type="text" [(ngModel)]="data[element.position -1 ][column]" 
           *ngIf="cellEditting(element.position, columnIndex)">
        <button type="button" *ngIf="cellEditting(element.position, columnIndex)"
          (click)="onClose(element.position, column)" >Close</button>
        </td>
    </ng-container>

        <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
        <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
    </table>

В вашем компоненте .ts

 //will keep track of the cell currently being editted
 edittedCell = { row: -1, column: -1 };
 onEdit(row: number, column: number) {
    this.edittedCell = { row, column };
  }

  cellEditting(row: number, column: number): boolean {
    return column === this.edittedCell.column && row === this.edittedCell.row;
  }

  onClose(row: number, column: string, input) {
      this.edittedCell = {row: -1, column: -1}
  }