Question

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

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

Answer 1

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

来源
显示的列

要创建一系列输入时，需要将输入与变量相关联，使用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的Array，因为行具有表

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

我选择使用ColumnsBefore，ColumnsAfter和ColumnsArray这三个数组来帮助我，所以displayColumns变得像

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

添加列时，我们需要向数组的每个元素添加一个新控件，将控件创建的引用添加到源中，将元素添加到ColumnsArray并刷新displayColumns。（控件的名称为，例如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的每个元素的控件，删除columnArray的元素并刷新displayColumns

  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

使用index中的*ngFor：

*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。

角材料表中的增量列

2 个答案: