Angular 2-NgFor不更新視圖

Question

我正在從事angular 2項目，嘗試更改列表時遇到問題。 NgFor無法識別更改，僅顯示第一次加載的列表。

這是我加載所有列表時的示例代碼，加載后立即將其重置為null。 該視圖仍顯示所有列表...

這是我的組件構造函數，例如：

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

    this.songs = null;

}

這是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>

Answer 1

有時Angular中的循環會以無法跟蹤您的項目的方式弄糟。

為防止這種情況，您可以使用像這樣的自定義跟蹤功能

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

在您的TS中

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

這樣，您設置了一個自定義trackBy函數，該函數將更新您的視圖（由於跟蹤ID不變，因此視圖未更新）。

Answer 2

您應該設置一個空數組，而不是null，也應該將其包含在方法中，否則永遠不會被調用

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

Answer 3

您仍然看到列表的原因是因為它是異步的。 您不能確定何時執行subscription方法。 它可以是直接的，幾秒鍾之內，只需幾個小時，甚至根本不需要。 因此，根據您的情況，您甚至在得到清單之前都要重置該清單。

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

  this.songs = null; //executed directly
}

上面的解釋可能是導致您出現問題的原因，但也可能有其他解釋。 僅在創建組件時才調用構造函數。 更改路由器參數不一定會創建組件。 如果可以，Angular可能會重新使用該組件。

Answer 4

嘗試這個

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

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