3

我有 ngModel，在 ngFor 循环内：

<div *ngFor="let comment of comments">
   <div *ngFor="let answer of toArray(comment.answers); let j = index; trackBy: trackByIndex;">
      <textarea id="editAnswer[j]" name="editAnswer[j]" [(ngModel)]="answer.text">

      {{ answer.text }}
   </div>
</div>

在我的组件中，我有两个用于索引迭代和将对象转换为数组的函数：

  trackByIndex(index: number, obj: any): any {
    return index;
  }

  toArray(answers: object) {
    return Object.keys(answers).map(key => ({
      key,
      ...answers[key]
    }))
  }

但是当我更改 textarea 中绑定的文本时，ngModel 不会改变。

Stackblitz 示例： https ://stackblitz.com/edit/angular-z6xatv

4

1 回答 1

3

该toArray方法似乎是创建原始comments.answers.text值的副本。在text输入元素中修改属性时，更改不会影响原始数据（此stackblitz中的控制台显示值未共享）。

如果您简化toArray以使其返回 的简单数组answers，则代码可以工作（请参阅此 stackblitz）。数组中的项目与text原始数据共享相同的引用。

comments = [
  {
    text: 'dsddsdsd', answers: {
      FszW: { text: 'answer 1' },
      dsSce: { text: 'answer 2' }
    }
  }
]

toArray(answers: object) {
  return Object.keys(answers).map(key => answers[key]);
}

如果您需要访问密钥，可以使用以下版本toArray：

toArray(answers: object) {
  return Object.keys(answers).map(key => {
    return { key: key, value: answers[key] };
  });
}

使用以下模板标记：

<textarea name="answer_{{j}}" [(ngModel)]="answer.value.text"></textarea>
{{ answer.key }}: {{ answer.value.text }}

作为旁注，我建议使用以下语法之一在模板中设置 name 属性：

name="answer_{{j}}"
[name]="'answer_' + j"
于 2018-04-23T13:54:37.530 回答