ngFor reloading on input

Ionic Framework
1

Hi I have a problem with my Ionic Chat App
the Gifs in the Chat are starting from the beginning if I type something in my input box.
If I use the track by function I can see that the ngfor is reloading when I type something in the input box.

https://stackblitz.com/edit/angular-ulu1dg

2

Hey @danielmm1997,

bei mir passiert da garnichts wenn ich was eingebe (bei deinem StackBlitz). Keine Logs, etc. Bitte mehr Informationen

1 Like
3

Hast du die Browser Konsole offen?
also console.log?

4

logo. Am Anfang werden die Indexe (0,1) einmal ausgeloggt. Beim tippen passiert garnicht

5

Hatte ausversehen daran gearbeitet. Sollte jetzt gehen.

6

Please ignore me if Iā€™m not saying anything relevant, but I donā€™t think itā€™s fair to equate ā€œthe trackBy function got calledā€ with ā€œthe ngFor got ā€˜reloadedā€™ā€. The trackBy function needs to get called in order to see what (if anything) needs to be changed in the DOM.

Try this experiment: use Chrome Developer Tools to change the element CSS on the ā€œhalloā€ element to include color: red. Then type something in the input box. If the DOM were really being rebuilt using the ngFor, I would expect that element to go back to being black. It doesnā€™t for me, so Iā€™m taking that to mean that the DOM hasnā€™t been updated.

7

iā€™m testing for 20 minutes now and would say @rapropos is right. I donā€™t think that the call of the trackBy function means the DOM refreshes. Also the Result of his CSS Test: The Color does not switch back, so i donā€™t think the DOM has been updated

8

Thank you for the Long answer.

In the sample Video you see my Problem, this happens only in my iOS App also in the Safari Browser on the iPhone.

If i rebuild it with stackblitz and open the Link in Safari, i cannot reproduce the bug there, only in my Ionic App.

I do not know how to find what caused the flikering.

9

If this only happens on iOS, is it possible that something like the interaction with the virtual keyboard is causing the rerendering?

10

I setup a new Ionic Project and testet the same on iOS i cant see the Bug anymore then i updated all ionic and angular Packages then i have the Bug (Angular 9 rc6). So i think it is something related to a ionic or angular update.

Do you have a idea where it could came from?

11

This makes me a bit suspicious - does the problem persist with 8.2.14?

12

If i use:

 "@angular-devkit/architect": "~0.803.20",
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular-devkit/core": "~8.3.20",
    "@angular-devkit/schematics": "~8.3.20",
    "@angular/cli": "~8.3.20",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.2.14",
"typescript": "^3.5.3"

it is working

with:

    "@angular-devkit/architect": "~0.900.0-rc.6",
    "@angular-devkit/build-angular": "~0.900.0-rc.6",
    "@angular-devkit/core": "~9.0.0-rc.6",
    "@angular-devkit/schematics": "~9.0.0-rc.6",
    "@angular/cli": "~9.0.0-rc.6",
    "@angular/compiler": "~9.0.0-rc.6",
    "@angular/compiler-cli": "~9.0.0-rc.6",

not

13

Here if you wanā€™t to test;

14

It is related to the


@angular/compiler-cli
15

You can open the project in the Safari Browser if you browse the URL

16


1 Like