Angular (ionic): rendering component with loop: component's view doesn't update

Question

When using *ngFor to render a component multiple times, the components rendered are not updating in DOM as expected.

Rendering the component in an ionic page:

<ion-row *ngFor="let file of files; let i = index">
   <app-add-file (fileEvent)="fileEventHandler(i, $event)"></app-add-file>   //component
</ion-row>

components appear as expected, but when something changes in the component, the change doesn't reflect in the DOM.

Is there a way to force the rerender?

Should I use ChangeDetectorRef inside the component?

Versions:

"@ionic/angular": "^4.7.1",
"@angular/common": "^7.2.2",

would love to provide more data if needed. Thanks!

Maybe you can add a simple demo to demostrate your issue in stackblitz.com would be fine. Since it refer to ChangeDetectionStrategy or other things of angular change detection. — Kevin Zhang
– Kevin Zhang, Commented Dec 17, 2020 at 7:17

Marco · Accepted Answer · 2020-12-17 08:54:19Z

1

Default change detector has trouble to detect change in array because it compares the instance of the array not the content. If you push something in the array, it remains the same instance so Angular won't start a change dectection.

Fastest solution is the use the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax to force the change dectection by changing the instance of the array.

myArray.push(data); // won't trigger change detection.
myArray = [...myArray]; // will trigger change detection.

Best solution would be to change the detection strategy of your component to OnPush. You can find more on this solution online.

answered Dec 17, 2020 at 8:54

Marco

1,10310 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular (ionic): rendering component with loop: component's view doesn't update

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related