ngFor内的Angular2 ngModel答案

【问题标题】：Angular2 ngModel inside of ngForngFor内的Angular2 ngModel
【发布时间】：2016-11-20 06:58:09
【问题描述】：

我试图从我的输入中绑定一个字符串数组，所以在 html 文件中我写了这个：

<div *ngFor="let word of words; let in=index" class="col-sm-3">
      <div class="form-group">
        <input type="text" [(ngModel)]="words[in]"  class="form-control" [attr.placeholder]="items[in]" required>
      </div>
  </div>

但这并没有按预期工作，因为当我记录 words 变量时，它会显示一个空数组，因为它在我的 Component 类中初始化。此外，如果这应该是我的问题的问题，我会从另一个组件记录变量。我有两个组件：

包含查询组件数组的表单组件。
具有单词字符串数组的查询子组件。

因此，words 变量被声明到查询组件中，但我通过表单组件记录此变量，如下所示：

console.log(JSON.stringify(this.queries));

虽然查询是表单组件中的查询数组：

queries:Query[] = [];

感谢您的帮助！

【问题讨论】：

对我来说，问题并不清楚。如果你能具体说出你到底想要什么？
经过多次测试，我的问题是在更新后将查询词发送回我的表单组件
每个输入标签都必须定义一个唯一的名称属性。 stackoverflow.com/questions/39336708/…

标签： data-binding angular angular2-ngmodel

【解决方案1】：

问题在于在 ngFor 中使用一组原始值 (words)。

您可以将单词更改为对象数组，例如

words = [{value: 'word1'}, {value: 'word2'}, {value: 'word3'}];

并像使用它

  <div *ngFor="let word of words; let in=index" class="col-sm-3">
      <div class="form-group">
        <input type="text" [(ngModel)]="words[in].value"  class="form-control" [attr.placeholder]="items[in]" required>
      </div>
  </div>

这也可以使用trackBy 解决，但我不确定。

【讨论】：

您好！你能再解释一下这个问题吗？老实说，我不明白 OP 的要求，但两种方式（原语或对象数组）似乎都可以正常工作：plnkr.co/edit/7ePXDWCwfeI0WglCj3KN?p=preview ...
我试过了，但还是不行。顺便说一句，我尝试在我的输入上添加事件 keyup 并将单词数组记录在同一个组件中。 Annnd 成功了，所以我的问题是将 words 数组传回给表单（父）组件。
@e.m.b “不起作用”并没有提供太多信息。
@acdcjunior 如果您在 plunker 中书写，在前 2 个输入字段中，每次按键后它们都会失去焦点，而在较低的输入中您可以正常书写。对于原始值，每次更改后都会重新创建行，因为每次值更改时都会替换数组值，并且输入会失去焦点，因为它被删除并添加了另一个。虽然在较低的输入中只有值发生变化，但*ngFor 不必重新创建行。
console.log(this.queries) 在表单组件中显示一个空词数组。

【解决方案2】：

每个输入标签都必须定义一个唯一的“名称”属性，如下所述：

Angular2 ngModel inside ngFor (Data not binding on input)

以下是更正后的代码：

<div *ngFor="let word of words; let in=index" class="col-sm-3">
  <div class="form-group">
    <input type="text" [(ngModel)]="words[in]" name="word{{in}}" class="form-control" [attr.placeholder]="items[in]" required>
  </div>

【讨论】：

是的，我遇到了这个问题，并通过提供不同的名称来解决。非常感谢

【解决方案3】：

通过使用 @Input() 函数并传递查询数组 + 查询索引号解决了这个问题。谢谢大家的支持。

【讨论】：

至少举个例子说明你是怎么做到的