首页 文章

ngFor中的Angular2 ngModel

提问于
浏览 次
8

我试图从我的输入绑定一个字符串数组，所以在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>

但是这没有按预期工作，因为当我记录单词变量时，它显示在我的Component类中初始化的空数组 . 另外，我应该记录来自另一个组件的变量应该是我的问题的问题 . 我有两个组成部分：

  • 包含查询组件数组的表单组件 .

  • 具有单词字符串数组的查询子组件 .

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

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

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

queries:Query[] = [];

谢谢你的帮助！

data-binding angular angular2-ngmodel

3 回答

  • 12

    问题是在 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 解决，但我不确定 .

    回复于
  • 15

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

    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>
    回复于
  • 1

    通过使用@Input（）函数并向查询数组传递查询索引号来解决此问题 . 谢谢你们的支持 .

    回复于

相关问题