需要帮助：动态构建形式的两种方式的数据绑定

Question

因此，对于我的大学，我需要使用伪造的客户数据构建一个动态表单。因此，我找到了一种方法来执行此操作，但是现在我的Update＆Add函数不再起作用。我认为这与不能将$ event.target.value绑定到函数有关（尽管我对此没有足够的了解）。

我尝试使用ngModel，它可以正确填充输入但不更改数据。

我的modal.component.ts：

import { Component, OnInit, Inject, Optional } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { Customer } from '../home/models/customer';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
  public context: string;

  constructor(
    public dialogRef: MatDialogRef<ModalComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: Customer|null,
    private http: HttpClient,
    private route: ActivatedRoute,
    @Inject('BASE_URL') private BASE_URL: string
    ) {
      this.data = data || {};
      this.context = !!this.data && !!this.data.customerID ? 'update' : 'create';
    }

    columns = [
      {header: 'Customer ID', id: 'customerID', cell: (row: Customer) => `${row.customerID}`},
      {header: 'Company Name', id: 'companyName', cell: (row: Customer) => `${row.companyName}`},
      {header: 'Contact Name', id: 'contactName', cell: (row: Customer) => `${row.contactName}`},
      {header: 'Contact Title', id: 'contactTitle', cell: (row: Customer) => `${row.contactTitle}`},
      {header: 'Address', id: 'address', cell: (row: Customer) => `${row.address}`},
      {header: 'City', id: 'city', cell: (row: Customer) => `${row.city}`},
      {header: 'Postal Code', id: 'postalCode', cell: (row: Customer) => `${row.postalCode}`},
      {header: 'Country', id: 'country', cell: (row: Customer) => `${row.country}`},
      {header: 'Phone Number', id: 'phone', cell: (row: Customer) => `${row.phone}`},
      {header: 'Fax Number', id: 'fax', cell: (row: Customer) => `${row.fax}`},
    ];

    ngOnInit() {
    }

  onNoClick(): void {
    this.dialogRef.close();
  }

  postData() {
    console.log(this.data);
    const headers = new HttpHeaders();
    headers.set('Content-Type', 'application/json');

    if (this.context === 'update') {
      this.http.post(`${this.BASE_URL}api/customers/${this.data.customerID}/update`, this.data, {headers: headers}).subscribe(a => {
      });
    } else {
      this.http.post(`${this.BASE_URL}api/customers/add`, this.data, {headers: headers}).subscribe(a => {
        // tslint:disable-next-line: deprecation
        location.reload(true);
      });
    }
  }

}

我的modal.component.html：

<h1 *ngIf="context === 'create'" mat-dialog-title>Create new Customer</h1>
<h1 *ngIf="context === 'update'" mat-dialog-title>Update Customer</h1>

<ng-container *ngFor="let column of columns" #modal>
  <div mat-dialog-content>
    <p>{{  column.header  }}</p>
    <mat-form-field>
      <input matInput [value]="column.cell(data)" (input)="column.cell(data)=$event.target.value" [name]='column.id' *ngIf="data.companyName != undefined"/>
      <input matInput />
    </mat-form-field>
  </div>
</ng-container>


<div mat-dialog-actions>
  <button mat-flat-button (click)="onNoClick()">Cancel</button>
  <button
    *ngIf="context === 'create'"
    mat-flat-button
    color="primary"
    (click)="postData(data)"
  >
    Create
  </button>
  <button
    *ngIf="context === 'update'"
    mat-flat-button
    color="primary"
    (click)="postData(data)"
  >
    Update
  </button>
</div>