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，請不要忘記導入它。