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 ponent 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>

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 ponent 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>

• javascript
• angular
• ponents
• ngfor

Share Improve this question Follow edited Mar 20, 2018 at 9:14 user4676340 asked Mar 20, 2018 at 9:13 Aviv EyalAviv Eyal 30722 gold badges33 silver badges1313 bronze badges 8

• Please post your whole code, not an example. If you want to post an example, then make a MCVE. – user4676340 Commented Mar 20, 2018 at 9:14
• You are trying to display data which is not there yet – mxr7350 Commented Mar 20, 2018 at 9:15
• @trichetriche this is all code – Aviv Eyal Commented Mar 20, 2018 at 9:20
• 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 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 Commented Mar 20, 2018 at 9:30

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 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).

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 ponent is created. Changing a router parameter doesn't necessarily create a ponent. Angular might re-use the ponent if it can.

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 = [];
}

Try this

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

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