Angular 2 - NgFor not updating view

Question

I am working on angular 2 project and I am having an issue when I am trying to change the list . NgFor not recognizing the changes , and displaying only the list loaded at first time .

here is an example code when I am loading all list and imminently after loading I reset it with null . the view still displaying all the list ...

this is my component constructor for example :

 constructor( private songService : SongService)
    this.songService.getSongs()
         .subscribe(songsList => {
             this.songs = songsList;
         });

    this.songs = null;

}

and this is the html :

<div class="row">
    <div  *ngFor= "let song of songs" class="col-md-4">
     <app-song-item [song]="song"></app-song-item>
    <br>
    </div>
</div>

Please post your whole code, not an example. If you want to post an example, then make a MCVE. — user4676340
– user4676340, Commented Mar 20, 2018 at 9:14
Do you want to display "songsList" in the UI? or You dont want to ? You are saying, "I am loading all list and imminently after loading I reset it with null . the view still displaying all the list ". — Basavaraj Bhusani
– Basavaraj Bhusani, Commented Mar 20, 2018 at 9:24
Set a breakpoint at this.songs = songsList (inside the subscribe) and one at this.songs = null to see in which order the songlist is changed. The subscribe callback is probably called after resetting the list to null. — flobjective
– flobjective, Commented Mar 20, 2018 at 9:30

user4676340 · Accepted Answer · 2018-03-20 09:34:31Z

6

Loops in Angular sometimes screw up, in the way that they don't track your items the way you would want it to.

To prevent that, you can use a custom track by function like this

<div *ngFor="let song of songs; let i = index; trackBy: customTB" class="col-md-4">

In your TS

customTB(index, song) { return `${index}-${song.id}`; }

This way, you set up a custom trackBy function, that will update your view (the view wasn't getting updated because the tracking ID wasn't changing).

answered Mar 20, 2018 at 9:34

user4676340

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

Comments

Robin Dijkhof · Accepted Answer · 2018-03-20 09:32:54Z

2

The reason why you are still seeing your list is because it is async. You can't be sure when the subscribe method is executed. It can be be direct, within seconds, take hours or not even at all. So in your case you are resetting the list before you are even getting one.

constructor( private songService : SongService)
  this.songService.getSongs()
    .subscribe(songsList => { //Might take a while before executed.
      this.songs = songsList;
    });

  this.songs = null; //executed directly
}

The above explanation might be the cause of your problem, but there could also be another explanation. The constructor is only called when the component is created. Changing a router parameter doesn't necessarily create a component. Angular might re-use the component if it can.

answered Mar 20, 2018 at 9:32

Robin Dijkhof

19.3k14 gold badges72 silver badges127 bronze badges

2 Comments

Aviv Eyal Over a year ago

thank you I understand what are you saying , I also try do it with variable type of number. on the constructor number = 5, and on other function I change it to 6 , the console shows that number is now 6 but the view not changing . and of course in the html I bind the number {{number}}

Robin Dijkhof Over a year ago

Maybe you can create a working example demonstrating your problem.

Sajeetharan · Accepted Answer · 2018-03-20 09:15:06Z

1

Instead of null you should set an empty array, also have it inside a method, otherwise it never gets called

 this.songService.getSongs()
         .subscribe(songsList => {
             this.songs = songsList;
         });
clear(){
    this.songs = [];
}

answered Mar 20, 2018 at 9:15

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

2 Comments

Aviv Eyal Over a year ago

thank you , but its not solving the problem , still shows all list

Sajeetharan Over a year ago

you have to call the method from the template

Rahul Sharma · Accepted Answer · 2018-03-20 09:30:04Z

-1

Try this

constructor(private songService: SongService) {
    this.songService.getSongs()
        .subscribe(songsList => {
            this.songs = songsList;
            this.reset();
        });
}

reset() {
    this.songs = [];
}

answered Mar 20, 2018 at 9:30

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

1 Comment

Aviv Eyal Over a year ago

this is wokring , but in any other place I am trying to do it its not working. as I commented in other posts I also tried with number initialized with 5 and bind it in the html code, in other function I increase the number but the view does not recognize the change

Collectives™ on Stack Overflow

Angular 2 - NgFor not updating view

4 Answers 4

Comments

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related