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

时间:2018-02-01 14:22:36

标签: typescript angular-material2 angular5

获得大量错误

  

无法读取未定义的属性'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 });
  }
}

1 个答案:

答案 0 :(得分:1)

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

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