Angular 6，如何在循环时更新 Angular 输入字段？

Question

我正在尝试在 html 页面内生成动态数量的 mat-form-field。

我在组件文件中有以下数据:

data = [{
    'name': 'XYZ',
    'id': 1,
    'accNo': 123
  },
  {
    'name': 'ABC',
    'id': 2,
    'accNo': 456
  },
  {
    'name': 'PQR',
    'id': 3,
    'accNo': 567
  }
  ]

在 html 中，我循环如下:

<div class="flex-container">
    <div class="deposit-box" *ngFor="let c of data">
        <div>
            <mat-form-field appearance="outline">
                <mat-label>Name:</mat-label>
                <input matInput placeholder="Placeholder" 
        [(ngModel)]=c.name>
      </mat-form-field>
    </div>
  </div>
</div>

但是我在更新 input 标记中的值时遇到问题。只有第一个 mat-form-field 正在获取值。

Stackblitz:https://stackblitz.com/edit/angular-7a7add

请帮助我。

目前我得到的输出为:

Answer 1

您需要在mat-form内使用ngFor

 <mat-form-field appearance="outline">
    <div *ngFor="let c of data">  
        <mat-label>Name:</mat-label>
        <input placeholder="Placeholder" [(ngModel)]=c.name>
    </div>
  </mat-form-field>

Demo