Angular 5，在数组中添加新行并保存

Question

我有这样的数组：

dataTest = [{name: 'Foo'},{name: 'Bar'}]

我正在通过 matIntput 显示所有数据。单击时，我将在数组中添加新行并显示空输入。没关系，但是当我将数据更改为带有 null 的新行，例如 John 并单击保存时，我的数组中没有任何更改，它看起来像这样：

dataTest = [{name: 'Foo'},{name: 'Bar'},{name: null}]

这是我的 app.compoent.html：

<mat-dialog-content>
  <div class="flex wrap vertical-align" *ngFor="let profile of dataTest; let i = index">
    <mat-form-field class="profile-name name">
        <input matInput placeholder="Name" value="{{profile.name}}">
    </mat-form-field>
    <div class="action-group">
        <span class="add-button"(click)="add()">ADD</span>
    </div>
  </div>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button class="background-white" mat-button mat-dialog-close>CANCEL</button>
  <button class="background-primary" mat-button [mat-dialog-close]="true" cdkFocusInitial (click)="save(dataTest)">SAVE</button>
</mat-dialog-actions>

这是我的 app.compoent.ts：

private add(): void {
 const rules: any = {
    name: ''
 };
 this.dataTest.push(rules);
 console.log(this.dataTest);
};


private save(dataTest) {
 console.log(dataTest)
}

任何帮助或想法我做错了什么！

Answer 1

使用 ngModel 如下：-

<input matInput placeholder="Name" [(ngModel)]="profile.name">

如果您还没有导入 FormsModule，请不要忘记。