ng-reflect-model显示正确的值，但未反映在输入中 [英] ng-reflect-model shows correct value but not reflecting in input

问题描述

遇到一个非常奇怪的问题，我的应用程序在非常特定的用户情况下行为不当.我有一个门户，用户可以在其中添加问题和答案，然后进行编辑.在这种情况下，当我删除一个集合(q + a)然后尝试添加它时，该模型正在更新，但是我的视图从占位符获取值并更新自身.在这里，我只是在数组中拼接和推送值并使用ngFor渲染.最后一个元素是一个哑元，用于输入上推的值.

Encountered a very weird issue where my application misbehaves in a very specific user case. I have a portal where users can add questions and answers and then edit them. In this case when I remove a set(q+a) and then try adding it, the model is getting updated but my view takes values from placeholders and updates itself. Here I am just splicing and pushing values in an array and rendering using ngFor. The last element is a dummy and that is used to enter values which are pushed up.

如有必要，请附上屏幕截图.

Attaching a screenshot if it makes any sense.

您可以看到对于文本框，ng-reflect-model显示正确的问题，但是元素本身显示占位符文本.

You can see that for the textbox, the ng-reflect-model shows correct question, but the element itself displays the placeholder text.

推荐答案

显然是由于Angular无法正确跟踪数组元素而引起的.我发现这很困难.因此，只需在ngFor中添加trackBy属性，便可以解决此问题.

Apparently the issue was being caused because Angular wasn't able to track the elements of my array properly. I found this out very hard way. So just adding a trackBy attribute to my ngFor, I was able to resolve this.

将此添加到我的组件中:

Added this to my component:

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

，然后在模板中:

<div class="margin-bottom-15"
     *ngFor="let assessment of language.assessments; trackBy:customTrackBy">

所以基本上我是在要求angular通过索引来跟踪数组中的元素.它解决了这个问题.

So basically I am asking angular to track my elements in the array by index. It resolved the issue.

评估是每个问题集的模型.

Here assessment is the model for each of the question-answer set.

这篇关于ng-reflect-model显示正确的值，但未反映在输入中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！