Question

我正在开展角度2项目，当我尝试更改列表时遇到问题。 Ng不识别更改，仅显示第一次加载的列表。

这是一个示例代码，当我加载所有列表并在加载后立即重置它与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

您仍然看到列表的原因是它是异步的。您无法确定何时执行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 4

试试这个

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

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

Angular 2 - Ng不更新视图

4 个答案: