有没有更好的方法来突出显示 Reactive Form 中选定的 formarray 项目？答案

【问题标题】：Is there a better way to highlight the selected formarray item in Reactive Form?有没有更好的方法来突出显示 Reactive Form 中选定的 formarray 项目？
【发布时间】：2022-11-22 16:26:48
【问题描述】：

我有一个玩家列表，在选择玩家名称时，我通过引入一个布尔标志来显示各个玩家的详细信息（isPlayerSelected) 在每个 formGroup 中。这种方法的一个缺点是页面响应很慢（当项目数量较多时），因为它必须使用 patchValue 更新每个 formGroup 中的布尔标志。有没有更好的方法来代替引入布尔标志？

请帮忙。我也附上了StackBlitz链接

selectPlayer(player: any) {
    player.isPlayerSelected = !player.isPlayerSelected;
    const selectedPlayer = this.playerDetailsControls.find(
      (item) => player?.id === item.get('id')?.value
    );
    const otherPlayers = this.playerDetailsControls.filter(
      (item) => player.id !== item.get('id')?.value
    );
    selectedPlayer?.patchValue({
      isPlayerSelected: true,
    });
    otherPlayers.map((item) => {
      item?.patchValue({
        isPlayerSelected: false,
      });
    });
  }

HTML

<form [formGroup]="form">
    <div formArrayName="playerDetails">
      <div *ngFor="let control of playerDetailsControls; let i = index">
        <div [formGroupName]="i">
          <div *ngIf="control.get('isPlayerSelected')?.value">
            Player Name : <input formControlName="playerName" /><br /><br />
            Role: <input formControlName="role" /><br /><br />
            Country: <input formControlName="country" /><br /><br />
            <hr />
          </div>
        </div>
      </div>
    </div>
  </form>

Stackblitz

【问题讨论】：

标签： javascript angular typescript angular-reactive-forms formarray

【解决方案1】：

如果拿到了选中的播放器窗体控件，那么就可以直接在窗体中使用了

selectedPlayer: FormGroup;

selectPlayer(player: any) {
  player.isPlayerSelected = !player.isPlayerSelected;
  this.selectedPlayer = this.playerDetailsControls.find(
    (item) => player?.id === item.get('id')?.value
  ) as FormGroup;
}

<form *ngIf="selectedPlayer" [formGroup]="selectedPlayer">
  Player Name : <input formControlName="playerName" /><br /><br />
  Role: <input formControlName="role" /><br /><br />
  Country: <input formControlName="country" /><br /><br />
  <hr />
  <button (click)="save()" [disabled]="!form.valid">Save</button>
</form>

【讨论】：

【解决方案2】：

为什么不为此重用现有变量selectedIndex？你可以像 (click)="selectedIndex = i" 一样将它设置为 onClick。

然后你就可以摆脱你的整个selectPlayer 功能。

在您的播放器详细信息部分中，您甚至不必遍历整个数组。您可以简单地直接绑定到基于selectedIndex 变量的 formGroup。

【讨论】：