删除在 angular 的同一行中选中另一个复选框时创建的对象

Question

我有一个简单的 table，其中包含描述和代表状态的两列：是和否。

每个复选框代表一个对象，其中包含启动时为空的“条件”属性。根据标记的内容，形成一个对象数组。我想要做的是，当同一行中的另一个复选框被 selected 时，删除之前创建的对象。不影响其他行。

例如，当我 select 一个复选框时：

然后 select 选中另一个复选框，我想删除上一个对象

我正在尝试检查并更改事件以防止用户select选中同一行中的两个复选框。还可以通过取消选中 selected 复选框来删除创建的对象，使“条件”为真或假。

我有一个关于 stackblitz 的演示：Demo

.HTML

<form [formGroup]="demoFormGroup" style="margin-top:20px; margin-bottom:30px">
  <div formArrayName="info">
    <table>
      <tr>
        <th></th>
        <th>YES</th>
        <th>NO</th>
      </tr>
      <tr *ngFor="let x of data; let i = index">
        <td>{{x.Description}}</td>
        <td>
          <mat-checkbox
            (change)="onChange($event,x,true)"
            [checked]="x.Condition"
          ></mat-checkbox>
        </td>
        <td>
          <mat-checkbox
            (change)="onChange($event,x,false)"
            [checked]="x.Condition != null && !x.Condition"
          ></mat-checkbox>
        </td>
      </tr>
    </table>
  </div>
</form>
<pre>{{ demoFormGroup.get('info')?.value | json }}</pre>

.TS

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  demoFormGroup: FormGroup;
  data: any;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.demoFormGroup = this.fb.group({
      info: this.fb.array([])
    });

    this.data = [
      {
        Id: 4,
        Description: 'Option 1',
        Condition: null
      },
      {
        Id: 6,
        Description: 'Option 2',
        Condition: null
      }
    ];
  }

  onChange(event: any, option: any, enabled: boolean) {
    option.Condition = enabled;
    const ctrl = (<FormArray>this.demoFormGroup.get('info')) as FormArray;
    if (event.checked) {
      ctrl.push(new FormControl(option));
    } else {
      this.removeObject(ctrl, event);
    }
  }
  removeObject(ctrl: any, event: any) {
    const i = ctrl.controls.findIndex(
      (x: any) => x.value === event.source.value
    );
    ctrl.removeAt(i);
  }
}

Answer 1

可能有几个选项可以实现，最简单的方法是获取所有选定的 Ids 并检查新选定的选项 ID 是否已经存在，然后不要推送到数组。

即：

    if (event.checked) {
       // Get the form value
       const selectedOptions = ctrl.value;
      // Create a new array with only selected Ids
       const selectedIds = selectedOptions.map(option => option.Id);

      // Here before pushing to control array check if value does not exist.
      if (!selectedIds.includes(option.Id)) {
        ctrl.push(new FormControl(option));
       }
    } else {
      this.removeObject(ctrl, event);
    }

删除在 angular 的同一行中选中另一个复选框时创建的对象

Delete an object created when another checkbox is selected in the same row in angular

arrays

checkbox

object

angular