时间戳

首页 > 解决方案 > 选择后更新默认值

angular - 选择后更新默认值

问题描述

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

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

如何将其更新为“无”？我能够更新选定的类，但无法更新未选择的值。这几天一直在苦苦挣扎。 在此处输入图像描述

我的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;
}

标签： angularformsangular-reactive-forms

解决方案

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

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

因此，当单击 getSelections() 方法中的选项时，根据 ActorId 更新选定的布尔值。

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

编辑 1

HTML

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

TS

来电reBuildData(event)_getSelections(event, actors)

 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;

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

推荐阅读