数据更改后 Angular 模态数据不刷新

Question

我有以模式显示的数据。但是，当我的数据更新并且父级检测到这一点时，我的模态数据永远不会更新。我错过了什么吗？
parent :

  @Input() players: Players[] = [];

  showPlayers() {
     const modalRef = this.modalService.open(PlayersModalComponent, {
      data: { players: this.players }
     },
    });
  }

 ngOnChanges(changes: SimpleChanges) {
    console.log('changes', changes);
    // This shows that players has changed and gone from say 2 players to 3 players after a few actions.  But modal doesn't update.
  }

模态

this.players = this.modalRef.data.players;

模态 HTML

Here I just list the players and initially they are perfect. But they do not update when a new player is added and ngChanges in parent ALSO shows there is a new row.

<modal class="modal" *ngIf="players">
  <div>
    <div *ngFor="let player of players">
         {{player.name}}
    </div>
  </div>
</modal>

但是，如果添加了新结果 --- 因为我正在从父级对 API 进行脉冲。检测到更改，但模式中的玩家列表未更新。

Answer 1

您可以使用 ngFor trackBy 函数来检测更改

<modal class="modal" *ngIf="players">
    <div>
        <div *ngFor="let player of players, trackBy: trackItem">
             {{player.name}}
        </div>
    </div>
</modal>

并添加 trackItem 功能

trackItem(item: any): any {
    return item.id;
}

项目应该有唯一的 id