角材料表中的增量列

Question

我希望能够在角度材料表中动态添加列时增加列。我正在使用 add column 方法从 Angular 材料文档中创建一个新列。 https://material.angular.io/components/table/examples

列已添加，但我需要它们递增并显示列号。w

Answer 1

当我们使用材料表时，我们需要考虑两件事：

1. 来源
2. 显示的列

当你想创建一系列输入时，你需要将输入与变量关联起来，那么使用 FormArray 呢？

好吧，如果我们在像这样的数据源中处理事情，事情就很容易了

[
{position: 1, name: 'Hydrogen',
 col0:new FormControl(),col1:new FormControl(),
 weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium',
 col0:new FormControl(),col1:new FormControl(),
 weight: 4.0026, symbol: 'He'},
...
]

一开始我们的表单数组是一个数组，里面有很多formGroups，因为rows有表格

formArray=new FormArray(ELEMENT_DATA.map(x=>new FormGroup({})))

我选择帮我使用三个数组，ColumnsBefore、ColumnsAfter 和 ColumnsArray，所以显示的Columns 变成了这样

this.displayedColumns=this.columnsBefore.map(x=>x.name)
                    .concat(this.columnsArray.map(x=>x.name))
                    .concat(this.columnsAfter.map(x=>x.name))

当我们添加一列时，我们需要为数组的每个元素添加一个新控件，向源添加控件创建的引用，向 ColumnsArray 添加一个元素并刷新显示的列。（控件的名称将是, 例如 col0,col1,...)

  addColumn()
  {
    let count=this.columnsArray.length
    this.formArray.controls.forEach((group:FormGroup,index)=>{
         group.addControl("col"+count,new FormControl())
         this.dataSource[index]["col"+count]=this.formArray.at(index).get("col"+count)
    })

    this.columnsArray.push({name:"col"+count,title:"Round "+(count+1)})
    this.displayedColumns=this.columnsBefore.map(x=>x.name)
                        .concat(this.columnsArray.map(x=>x.name))
                        .concat(this.columnsAfter.map(x=>x.name))
  }

要移除列，我们需要移除FormArray的每个元素的控件，移除columnsArray的元素并刷新displayedColumns

  removeColumn()
  {
    let count=this.columnsArray.length-1
    if (count>=0)
    {
      this.columnsArray.pop()
      this.formArray.controls.forEach(group=>
      {
        (group as FormGroup).removeControl("col"+count)
      })
      this.displayedColumns=this.columnsBefore.map(x=>x.name)
                        .concat(this.columnsArray.map(x=>x.name))
                        .concat(this.columnsAfter.map(x=>x.name))
    }
  }

不需要从源中移除元素

.html 是（看看我们为什么使用三个数组）

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container *ngFor="let column of columnsBefore" [matColumnDef]="column.name">
        <th mat-header-cell *matHeaderCellDef>{{column.title}}</th>
        <td mat-cell *matCellDef="let element"> {{element[column.name]}} </td>
    </ng-container>

    <ng-container *ngFor="let column of columnsArray" [matColumnDef]="column.name">
        <th mat-header-cell *matHeaderCellDef>{{column.title}}</th>
        <td mat-cell *matCellDef="let element">
            <input style="width:2rem;margin-rigth:.5rem" [formControl]="element[column.name]"/>
        </td>
    </ng-container>

    <ng-container *ngFor="let column of columnsAfter" [matColumnDef]="column.name">
        <th mat-header-cell *matHeaderCellDef>{{column.title}}</th>
        <td mat-cell *matCellDef="let element"> {{element[column.name]}} </td>
    </ng-container>

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

stackblitz

TODO，创建 formArray 后，订阅 formArray.valueChanges 将总数放在一个列中

Answer 2

在*ngFor 中使用index：

*ngFor="let column of displayedColumns; let i = index;"

然后加1：

<button mat-raised-button (click)="addColumn()"> Add column </button>
<button mat-raised-button (click)="removeColumn()"> Remove column </button>
<button mat-raised-button (click)="shuffle()"> Shuffle </button>

<table mat-table [dataSource]="data" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns; let i = index;">
    <!-- HERE -->
    <th mat-header-cell *matHeaderCellDef> {{ i + 1 }} {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

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


<!-- Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

---

这里有一个Working Sample StackBlitz 供您参考。