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

问题描述

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

如果有任何意义，请附上屏幕截图.

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

解决方案

这个问题显然是因为 Angular 无法正确跟踪我的数组元素.我发现这是非常困难的方式.所以只需在我的 ngFor 中添加一个 trackBy 属性，我就能解决这个问题.

将此添加到我的组件中:

customTrackBy(index: number, obj: any): any {回报指数；}

然后在模板中:

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

这里的评估是每个问答集的模型.

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.

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

解决方案

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;
}

and then in the template:

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

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屋！