如何创建具有表单功能的材料数据表以保存记录

Question

得到很多错误

无法读取未定义的属性'toUpperCase'（“ ] * matRowDef =“columns：displayedColumns”>

要动态地在表中添加行

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

和Typescript代码是

 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>