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

您仍然看到您的列表的原因是因为它是异步的。您无法确定 subscribe 方法何时执行。它可以是直接的，在几秒钟内，需要几个小时甚至根本不需要。因此，在您的情况下，您甚至在获得列表之前就重置了列表。

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 3

你应该设置一个空数组，而不是 null ，并将它放在一个方法中，否则它永远不会被调用

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

Answer 4

试试这个

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

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