[英]Angular: *ngFor not updating view after array changes
I'm making a web app with Angular however I'm having trouble with the load button. 我正在使用Angular制作一个Web应用程序,但是我在使用加载按钮时遇到了麻烦。 So the user presses the load button, selects a save to load, and a new set of properties is loaded into forms that each constitute a step-item in a stepper.
因此,用户按下加载按钮,选择要保存的保存,然后将一组新的属性加载到表单中,每个表单构成步进器中的一个步进项。 The forms array that loads all of the forms is 'reset' with this function:
可以使用以下功能“重置”加载所有表单的表单数组:
private resetPropForms(): void {
this.propForms = [];
}
This is the function that receives as an argument a properties event and then sets the forms array: 该函数接收一个属性事件作为参数,然后设置表单数组:
onPropertiesEmitted(properties: Property[]): void {
this.resetPropForms();
this.resetDividedProperties();
this.resetUndividedProperties();
this.setDividedProperties( properties );
this.setForms();
this.setUndividedProperties( properties );
}
And this is what my template looks like: 这是我的模板的样子:
<se-stepper
*ngIf="undividedProperties"
[linearMode]="false"
[(activeStepIndex)]="activeStepIndex"
>
<se-step-item
*ngFor="let form of propForms"
>
<app-properties-form
[propertiesForm]="form"
(change)="onPropertiesChanged($event)"
>
</app-properties-form>
</se-step-item>
</se-stepper>
Lastly, the view is updated but only after I go to the next step and come back. 最后,视图已更新,但仅在我转到下一步并返回后才进行。 And if I save the properties then the correct value is sent to the backend even though the value displayed in the view is incorrect/not updated.
而且,如果我保存属性,那么即使视图中显示的值不正确/未更新,也会将正确的值发送到后端。 Any ideas why this is happening.
任何想法为什么会这样。 I tried using trackBy with a unique identifier for each form ( using a random number ) but that didn't work.
我尝试对每个表单(使用随机数)使用具有唯一标识符的trackBy,但这没有用。 I tried using ChangesRef and detectChanges() and that didn't work.
我尝试使用ChangesRef和detectChanges(),但是没有用。 When I leave out the *ngFor and just display the first form in the array it updates properly so that leads me to believe that this problem has something to do with the *ngFor.
当我忽略* ngFor并仅显示数组中的第一个表单时,它会正确更新,这使我相信此问题与* ngFor有关。
edit:I'm pretty sure setTimeout() placed in onPropertiesEmitted() worked but I forgot where I put it to make it work and it seemed like a not-so-great solution to the problem 编辑:我很确定放在onPropertiesEmitted()中的setTimeout()可以工作,但是我忘记了放置它的位置以使其正常工作,这似乎不是解决问题的好方法
I Think the problem is that the array is the same and change detect won't detect changes, try this 我认为问题在于数组是相同的,并且更改检测不会检测到更改,请尝试执行此操作
private resetPropForms(): void {
//this.propForms = [];
//array.slice() returns new array
this.propForms = this.propForms.slice(0,0);
}
You could also reset the form before assigning new properties ( form.reset() ) 您还可以在分配新属性之前重置表单(form.reset())
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.