选择后更新默认值

Question

我正在尝试实现下图中显示的内容：

如果用户在事件 1 中选择了一个选项，则未选择的默认值必须从“SELECT”更新为“None”。目前发生的情况是它仍然是“SELECT”。

如何将其更新为“None”？我可以更新选定的 class，但无法更新未选定的值。这几天一直在挣扎。

我的Html:

 <form (ngSubmit)="onSubmit()">
  <div *ngFor="let event of groupSelections" 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]="isSelectedPlayer(team?.Players) ?'selected':''">
        <select (change)="getSelections(event, actors)">
          <option value="">SELECT</option>
          <option value="" *ngFor="let player of team?.Players">
            {{ player?.Name }}
          </option>
        </select>
      </div>
    </div>
    <div *ngIf="!isFirst" class="col-6">
      <div>
        {{ team?.ActorName }}
      </div>
        </div>
      </div>
    </div>
  </form>

我的数据：

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
            }
          ]
        }
      ]
    }
  ]
}

我的 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(event, actors): 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,

    PlayerPosition: this.player.Position,
    PlayerPoint: this.player.Point,
   });
   this.playerSelections = selections;
}

Answer 1

在与 ActorId,ActorName 平行的数据接口中添加一个新属性，可能是 selected: boolean 所以你的数据如下所示，

"Actors": [
        {
          "ActorId": 33,
          "ActorName": "Italy",
          "selected": true, // if Italy is selected
           //..... other fields...
        }
    ]

所以当点击 getSelections() 方法中的选项时，根据 ActorId 更新选择的布尔值。

在HTML中，而不是这个，<option value="">SELECT</option> 根据循环中的 selected 布尔值执行逻辑以获取 SELECT 或 None 值。

编辑 1

HTML

        <option *ngIf="!team.selected && touched" value="">NONE</option>
        <option *ngIf="!touched" value="">SELECT</option>

TS

从 getSelections(event, actors)

呼叫 reBuildData(event)

 reBuildData(event) {
    this.touched = true;
    this.groupSelections[0].Events.forEach(event1 => {
      event1.Actors.forEach(actors1 => {
        if (actors1.ActorId == event.ActorId) {
          actors1.selected = true;
        } else {
          actors1.selected = false;
        }
      });
    });
    console.log(this.groupSelections[0]); // check the selected value for all actors.
  }

声明此属性 touched = false;

根据您的需要更改此逻辑。

Answer 2

您可以做与您在“已选择”中所做的相反的事情class：创建包含组事件中未选择的值的数组：

TS 文件中的新功能：

notSelectedPlayer(players: any): boolean {
  return this.unselectedPlayers.findIndex(element => element.ActorId === players) > -1;
}

然后复制 getSelections() 中的函数，但只复制未选择的值：

if (this.gameEvent.Actors.find(item => item.ActorId !== this.selectedTeam.ActorId)) {
  const unselectedValue = this.unselectedPlayers.filter(elem => {
      return elem.ActorId !== this.selectedTeam.ActorId;
  });
  selections2.push(...unselectedValue, {
    EventId: this.gameEvent.EventId,
    ActorId: this.unselectedValue.ActorId,
    EventActorId: this.unselectedValue.EventActorId,
    Score: 0,
    Position: 0,
    PlayerPosition: null,
    PlayerPoint: 0,
    PlayerId: 0
  });
}

然后在你的 html:

<select (change)="getSelections(event, actors)">
    <option value="" hidden *ngIf="!notSelectedPlayer(team.ActorId)">SELECT</option>
    <option value="" hidden *ngIf="notSelectedPlayer(team?.ActorId)"> None</option>
    <option value="" *ngFor="let player of team?.Players">
        {{ player?.Name }}
    </option>
</select>

选择后更新默认值

Update default value after selection made

forms

angular

angular-reactive-forms