ng-reflect-model 显示正确的值但未反映在输入中

Posted 2023-03-13

【中文标题】ng-reflect-model 显示正确的值但未反映在输入中

【英文标题】：ng-reflect-model shows correct value but not reflecting in input

【发布时间】：2017-04-01 11:38:38

【问题描述】：

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

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

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

【问题讨论】：

请添加一些代码

通过在 ngFor 中添加 trackBy 解决了这个问题

请添加解决您问题的代码，以便其他人获得解决方案。谢谢

【参考方案1】：

显然问题是由于 Angular 无法正确跟踪我的数组的元素而引起的。我发现这一点非常困难。因此，只需向我的 ngFor 添加一个 trackBy 属性，我就能解决这个问题。

将此添加到我的组件中：

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

然后在模板中：

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

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

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

【讨论】：

这可能是我在这里读过的最有用的帖子之一。我认为这是极少数情况，因为您不需要更多地注意拼写，因为您的内容会补偿它。虽然你可以:-)

\o/ 谢谢彼得！你让我开心。

感谢老兄拯救了我的一天

【参考方案2】：

如果您使用嵌套的 ngFor，则名称属性可能不是唯一的。它应该是独一无二的。所以为 name 属性加上 for 循环的索引使其唯一。

 <form #f="ngForm" validate>
      <div *ngFor="childItem of parentArray; index as pIndex;">
           <div *ngFor="childArray of childItem.parameters;index as cIndex;">
                 First Name: <input name="childArray-pIndex+''+cIndex" 
                 type="text" [(ngModel)]="childArray.firstname" required>
                 Last Name: <input name="childArray-pIndex+''+cIndex" 
                 type="text" [(ngModel)]="childArray.lastname" required>

                <button type="button" [disabled]="!f.valid"
                (click)="submitForm();"> Submit  </button>
            </div>
       </div>
 </form>

【参考方案3】：

你也可以使用

*ngFor="childItem of parentArray; index as i;"

和

[attr.data-target]="'#test' + i"

和

name="testi