Question

我要显示以下列表：

<li *ngFor="let player of players" [class.selected]="player === selectedPlayer" (click)="onSelect(player)">
    <a>
        <span class="badge">{{player.victories}}</span>
        <span class="badge2">{{player.matches}}</span>
        {{player.name}}
    </a>
</li>

我使用symple函数将 selectedPlayer 传递给后代组件：

onSelect(player: Player): void {
   this.selectedPlayer = player;
}

因此，所选项目用于在其他组件中详细显示播放器。

问题是：如果刷新列表，以前的 selectedPlayer 将丢失，但我想保持选中状态。

Answer 1

我只需要在新列表上“重新选择”对应的 selectedPlayer 。 Ts，html或Angular在这里做了其余的工作（如果我错了，请告诉我），这样我就不需要访问列表并以编程方式设置所选的 new 。

为此，我做了以下功能：

private reSelectPlayer() {
  for (let p of this.players) {
    if (this.haveSelected) {
      if (p.id === this.selectedPlayer.id) {
        this.selectedPlayer = p;
      }
    }
  }
}

我调用刷新功能：

private refreshPlayersList() {
  this.playerService.getPlayerList().subscribe(
    players => {
      this.players = players
      this.reSelectPlayer();
  });
}

请注意， haveSelected 初始化为错误值，并且当用户在列表中选择一个项目时将其设置为true。

Answer 2

首先，添加所需的行为是正常的，可以添加一个标志。

将标志添加到对象。对于这种情况，我将创建一个新对象：

class pObject{
    Player player;
    isSelected boolean:= false;
}

修改了所选功能：

onSelect(obj: pObject){
    this.pObject = obj;
    this.isSelected = ! this.isSelected ;
}

更新显示：

enter code here
...

是否可以通过编程方式在<li * ngfor =“”>列表中选择一个项目？

2 个答案: