将选定的类添加到 ngFor 中的每个单击项目答案

【问题标题】：Add selected class to each clicked item in ngFor将选定的类添加到 ngFor 中的每个单击项目
【发布时间】：2021-04-25 17:17:46
【问题描述】：

问题：使用当前代码，当我单击一个项目时，它会正确地将“选定”类添加到单击的项目，但是当我单击另一个选项时，“选定”类会从中删除并添加到新点击的项目。

想要：我想将选定的类添加到所有已选择的项目中，我的代码如下，不胜感激：

我的 HTML：

<form (ngSubmit)="onSubmit()">
 <div *ngFor="let event of groupSelections; let i = index;" class="row">
   <div class="col-12">
     <div class="row">
       <div *ngFor="let team of event?.Actors; first as isFirst" class="col-6">
         <div class="row">
           <div *ngIf="isFirst" class="col-6">
          <div>
              {{ team?.ActorName }}
          </div>
        </div>
        <div class="col-6">
          <div [className]="selectedValue == team?.Players ?'selected':''">
            <select (change)="getSelections(team, event, $event, team?.Players)">
              <option value="none" selected disabled hidden>SELECT</option>
              <option value="" *ngFor="let player of team?.Players; let j = index">
                {{ player?.Name }}
              </option>
            </select>
          </div>
        </div>
        <div *ngIf="!isFirst" class="col-6">
          <div>
            {{ team?.ActorName }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我的功能：

getSelections(actors, event, selectedOption, player): any {
    const selections = [];
    this.selectedTeam = actors;
    this.selectedTeamPlayers = actors.Players;
    this.gameEvent = event;
    this.selectedValue = player;

    selections.push({
        EventId: this.gameEvent.EventId,
        ActorId: this.selectedTeam.ActorId,
        EventActorId: this.selectedTeam.EventActorId,
        Score: 1,
        Position: 1,
        PlayerPosition: this.player.Position,
        PlayerPoint: this.player.Point,
      });
    this.playerSelections = selections;
}

我的数据：

groupSelections = [
{
  "PromotionId": 5,
  "Events": [
    {
      "Actors": [
        {
          "ActorId": 33,
          "ActorName": "Italy",
          "Players": [
            {
              "Name": " Mattia De Sciglio (D)",
              "Position": "DEFENDER",
              "Point": 5
            },
            {
              "Name": "Bryan Cristante (M)",
              "Position": "MIDFIELDER",
              "Point": 3
            }
          ]
        },
        {
          "ActorId": 34,
          "ActorName": "Turkey",
          "Players": [
            {
              "Name": " Zeki Çelik (D)",
              "Position": "DEFENDER",
              "Point": 5
            },
            {
              "Name": "Ozan Tufan (M)",
              "Position": "MIDFIELDER",
              "Point": 3
            }
          ]
        }
      ]
    },
    {
      "Actors": [
        {
          "ActorId": 77,
          "ActorName": "Slovakia",
          "Players": [
            {
              "Name": "Mattia Perin (G)",
              "Position": "GOALKEEPER",
              "Point": 10
            },
            {
              "Name": "Bryan Cristante (M)",
              "Position": "MIDFIELDER",
              "Point": 3
            }
          ]
        },
        {
          "ActorId": 78,
          "ActorName": "Sweden",
          "Players": [
            {
              "Name": " Zeki Çelik (D)",
              "Position": "DEFENDER",
              "Point": 5
            },
            {
              "Name": "Ozan Tufan (M)",
              "Position": "MIDFIELDER",
              "Point": 3
            }
          ]
        }
      ]
    }
  ]
}

【问题讨论】：

标签： css angular

【解决方案1】：

通常您应该将selected 字段添加到您的Players 对象。然后可以设置为true，添加额外类的时候考虑一下。

但是让我们先用一个简单的数组来做。

TS 文件

selectedPlayers: Array<string> = [];

 // check whether the players object is in the list
 isSelectedPlayer(players: any): boolean {
     return this.selectedPlayers.findIndex(element => element === players) > -1;
 }

getSelections(actors, event, selectedOption, player): any {
    const selections = [];
    this.selectedTeam = actors;
    this.selectedTeamPlayers = actors.Players;
    this.gameEvent = event;

    // add the selection to your list, if is not in it
    if (this.selectedPlayers.findIndex(element => element === player) === -1) {
        this.selectedPlayers.push(player);
    }
    
    selections.push({
        EventId: this.gameEvent.EventId,
        ActorId: this.selectedTeam.ActorId,
        EventActorId: this.selectedTeam.EventActorId,
        Score: 1,
        Position: 1,
        PlayerPosition: this.player.Position,
        PlayerPoint: this.player.Point,
   });
   this.playerSelections = selections;
}

HTML

<div [className]="gameEvent == event && isSelectedPlayer(team?.Players) ? 'selected':''">

【讨论】：

谢谢您，先生，工作正常，必须删除此“gameEvent == event &&”
不客气。 ? 很高兴听到，它有效。