我在ngFor循环内有ngModel:
<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
该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"
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句