ngFor does not update the dom fully

Question

I am facing a strange behavoir when using ngFor:

General usage: I have a text list stored on my backend. The user can display this list an gets a list of generated by ngFor with the values preset to the list content. Additionally he can edit the text and send the updated one to the backend. The backend will then update the whole list and sends a notify to all clients. If one of the clients is displaying the updated list it fetches the list again, so that it is up to date. (This happens ofc to the editor in any case, so there is no special threatment to the editor)

Maybe my approach is not the best but the problem is a different one: The new list arrives asynchronous and gets updated. The problem is that the text which was used to edit will be pushed "down". The list is not correctly displayed while the backend has the correct list aswell as the new fetched list arrives correctly on the client. It has to have a display/change detection issue.

I tried with the "track by" feature without success.

Minimal working example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div *ngFor="let i of testList">
                <input type="text" [value]="i">
              </div>
  <button (click)="onClick()">Click</button>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test-app';
  testList = ["one", "two", "three", "", ""];

  onClick()
  {
    setTimeout(()=>{
      this.testList = ["one", "two", "three", "four", ""];
    }, 2000)
  }
}

Write something in the fourth text field, then press the button. After the 2 seconds your text should be shifted to the 5th field.

Before Click

After Click and 2sec

Expected

Thank you in advance

The double-binding feature that Angular provides update dinamically the component. So if the list from your back end is somethink like that : `["1","2","3","4","5"]` just do something like `.subscribe( evt => this.testList = evt);` and the data will be updated — Jacopo Sciampi, Sep 12 '18 at 08:35
But isnt this excactly what I am simulating by the timeout in my example? — Woife, Sep 12 '18 at 08:40

score 1 · Accepted Answer · answered Sep 12 '18 at 09:08

1

This is the behavior of Angular shadow DOM updates. You can change your code like this:

setTimeout(()=>{
  this.testList = ["one", "two", "three", "four", null];
}, 2000)

answered Sep 12 '18 at 09:08

Dmitriy Snitko

931
5
14

After the first time this issue occured I tried a bit to solve it but quickly went on (since it wasnt critical). After I created this minimal example I tried a bit more and just found the solution:https://stackoverflow.com/questions/40863074/ngfor-behaviour-on-primitive-data-type/40863118#40863118 – Woife Sep 12 '18 at 09:12

ngFor does not update the dom fully

1 Answers1