如何创建具有表单功能的 material 数据 table 来保存记录

Question

出现很多错误

Cannot read property 'toUpperCase' of undefined ("
]*matRowDef="columns:displayedColumns" >

在 table 中动态添加行

<button (click)="addABunch(3)">Add 3</button>

使用姓名和手机号码创建用户

<mat-table #table>
            <ng-container matColumnDef="Username">
            <mat-header-cell *matHeaderCellDef>Drug Name</mat-header-cell>
            <mat-cell >
                <mat-form-field class="example-full-width">
                    <input class="form-control" matInput 
                                   formControlName="Name">
                  </mat-form-field>
            </mat-cell>
            </ng-container>
        <ng-container matColumnDef="Mobile">
            <mat-header-cell *matHeaderCellDef>Drug Name</mat-header-cell>
            <mat-cell>
                <mat-form-field class="example-full-width">
                    <input class="form-control" matInput 
                         formControlName="Mobile">
                  </mat-form-field>
            </mat-cell>
            </ng-container>
            <mat-header-row *matHeaderRowDef="displayedColumns">
                        </mat-header-row>
            <mat-row *matRowDef="columns: displayedColumns"></mat-row>
                 </mat-table>

打字稿代码是

 displayedColumns = [' Name', 'Mobile'];

addABunch(n: number) {
  for (let x = 0; x < n; x++) {
    this.items.push({ value: ++this.max });
  }
}

Answer 1

我认为这是一个无效的 matRowDef 声明。改用这个

<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

如何创建具有表单功能的 material 数据 table 来保存记录

How to create a material data table with form functionality to save records

typescript

angular-material2

angular5