Angular2：无法获取 NgFor 在 ngForm 中重复输入的输入值

Question

我正在尝试设置一个表单，管理员用户可以在其中设置气瓶的价格。瓶子有类型、名称和价格如下：

export class Bottle {

  constructor(
    public typeId: string,
    public name: string,
    public price: number
  )
  { }
}

这是显示的表单：一个 AccountID 输入和用 ngFor 重复的瓶子列表。

<form (ngSubmit)="onSubmit()" #bottleUpdatePriceForm="ngForm" >

    <div class="form-group">
      <label for="accountId ">Account ID : </label>
      <input type="text" class="form-control" id="accoundId" name="accountId" required [(ngModel)]="accountId">
    </div>

    <div class="form-group" *ngFor="let bottle of bottleArrayToUpdate; let i = index">
      <label for="bottlePrice ">{{bottle.name}} : </label>
      <input type="text" class="form-control" id="bottlePrice" name="bottlePrice" [ngModel]="bottleArrayToUpdate[i].price">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
  </form>

我将数据作为 Bottles 数组（实际上是 6 个）从另一个组件发送到我的表单，其中它们的 Type 和 Name 已设置，其中 Price 为空。

@Input() private bottleArrayToUpdate: Bottle[];

...

onSubmit() {
    this.submitted = true;    

    console.log(this.accountId); // => Works fine
    console.log(this.bottleArrayToUpdate); // => All the prices are still null
}

有没有办法获取瓶子重复输入的输入值，并且使用标准形式，而不是反应形式？

我也试过 [ngModel]="bottle.price 但我也无法访问我的值。

感谢您的帮助

Answer 1

您应该使用 [()] 符号来确保双向绑定：

  <input type="text" name="bottlePrice" [(ngModel)]="bottle.price">

也不要使用 id，因为这在页面中应该是唯一的，并且您在 *ngFor :)

中使用它

Angular2：无法获取 NgFor 在 ngForm 中重复输入的输入值

Angular2 : Cannot get input values of Inputs repeated by NgFor in a ngForm

angular2-forms

ngfor

angular