数据绑定 – ngFor中的Angular2 ngModel

发布时间：2020-12-17 07:52:59 所属栏目：安全来源：网络整理

导读：我试图从我的输入绑定一个字符串数组,所以在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[i

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

谢谢你的帮助！

问题是在ngFor中使用原始值(单词)数组.

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

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也可以解决这个问题,但我不确定.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!