Question

我正在使用角度材质以数组的形式从数据创建表。这一切都很美妙。我遇到的问题是字段本身需要是表单字段。它们需要从数据中填充，然后可编辑。此外，带有空白字段的新行应该可填写并保留。我发现虽然行数据填充，但值永远不会进入表单字段本身，或者表单字段仅由第一个记录填充。我引用字段值的方式有问题，但我看不出它是什么。所以，这是html中的表格：

<form #a="ngForm" >
  <mat-table #approvalsTable [dataSource]="approvalsDataSource"
             #approvalsSort="matSort" matSort matSortActive="description"
             matSortDirection="asc" style="width:900px;font-family: Arial, Helvetica, sans-serif; font-size:14px;">

    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Description</mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index">
        <input type="text"
               name="description" [(ngModel)]="element.description" [value]="element.description">
        {{element.description}}

      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="approvalNumber">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Approval No.</mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index">
        <input type="text"
               name="approvalNumber" [(ngModel)]="element.approvalNumber" [value]="element.approvalNumber">
        {{element.approvalNumber}}

      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="expires">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Expiration Date</mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index">
        <input type="text"
               name="expires" [(ngModel)]="element.expires" [value]="element.expires">
        {{element.expires}}

      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef mat-sort-header disabled>Actions</mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index;" style="text-align:right;">

        <div style="min-width:9em;">
          <button (click)="addApproval(a.value)"><img src="../../assets/images/icons/plus.svg" width="20px" height="20px"/>
          </button>
          <button (click)="deleteApproval(a.value)"><img src="../../assets/images/icons/garbage.svg" width="20px" height="20px"/>
          </button>
          <button (click)="saveApproval(a.value)"><img src="../../assets/images/icons/checked-1.svg" width="20px" height="20px"/>
          </button>
        </div>

      </mat-cell>
    </ng-container>

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

...这里是填充表格和操作按钮

的组件代码

  @ViewChild('approvalsSort') public approvalsSort: MatSort;

  APPROVALS_ELEMENT_DATA: Approval[] = [];
  approvalsDisplayedColumns = ['description', 'approvalNumber', 'expires', 'actions'];
  approvalsDataSource;

  ngOnInit() {
    this.currentUser = this.authenticationService.returnCurrentUser();

    // 1. Establish the organisation
    // an organisaiton may already exist, either being routed

    if (this.route.data) {
      this.route.data
        .subscribe(({ organisation }) => {
          this.organisation = organisation;
        });

    } else {
      // or is attached to the current user
      this.organisation = this.currentUser.organisation;
    }

    if (!this.organisation) {
      this.organisation = new Organisation();
    }

    // 4. Initialise the tables
    this.makeBlankApproval();

    this.render(this.organisation);    
  }

  render(o: Organisation) {
    console.log(this.organisation.approvals); // this is the console.log!!!
    this.APPROVALS_ELEMENT_DATA = o.approvals;
    this.approvalsDataSource = new MatTableDataSource<Approval>(this.APPROVALS_ELEMENT_DATA);
    this.approvalsDataSource.sort = this.approvalsSort;    
  }

  makeBlankApproval() {
    const approval: Approval = makeApproval('', '', '');
    this.organisation.approvals.push(approval);
  }

  addApproval(form: any) {
    let foundEmpty: boolean = false;
    for (let i = 0; i < this.organisation.approvals.length; i++) {
      const appToUpdate = this.organisation.approvals[i];
      if (appToUpdate.description === '' && appToUpdate.approvalNumber === '' && appToUpdate.expires === '') {
        foundEmpty = true;
      }
    }
    if (!foundEmpty) {
      this.makeBlankApproval();
    }
    this.render(this.organisation);
  }

  deleteApproval(form: any) {
    console.log(form);
  }

  saveApproval(form: any) {
    this.render(this.organisation);
  }

现在，为了解决这个问题，我所做的是： 1.用一些虚拟数据填充第一行 2.保存（使用saveApproval（表单）） 3.使用addApproval（）

添加新行

我期望表格中的两行，第一行为空白，第二行填写已保存的字段数据。

我得到的是两个空白字段。

控制台日志提供了一个有趣的故事，所以这是测试的结果：