angular - ionic 复选框未正确检查

Question

我是 angular/ionic 的新手

我有父复选框，单击它时，我想启用所有子复选框的勾选，反之亦然

这是我的代码，我已经厌倦了但它不起作用:

home.html

<form [formGroup]="form">
<ion-item>
    <ion-checkbox slot="start" formControlName="AllBulkhead" (ionChange)="checkBoxAllLongiClick($event)">
    </ion-checkbox>
    <ion-label>All longitudinal bulkheads</ion-label>
  </ion-item>
  <div class="subCheckbox">
    <ion-item>
      <ion-checkbox slot="start" formControlName="longiBulkhead" (ionChange)="checkBoxLongiClick($event)">
      </ion-checkbox>
      <ion-label>Longitudinal bulkheads</ion-label>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" formControlName="outerBulkhead" (ionChange)="checkBoxOuterLongiClick($event)">
      </ion-checkbox>
      <ion-label>Outer longitudinal bulkheads</ion-label>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" formControlName="innerBulkhead" (ionChange)="checkBoxInnerLongiClick($event)">
      </ion-checkbox>
      <ion-label>Inner longitudinal bulkheads</ion-label>
    </ion-item>
  </div>
</form>

home.ts

constructor(private _fb: FormBuilder){
this.form = this._fb.group({
      AllBulkhead: false,
      longiBulkhead: false,
      outerBulkhead: false,
      innerBulkhead: false,
});
}

checkBoxAllLongiClick(e) {
    if (e.currentTarget.checked) {
      this.form.controls['longiBulkhead'].patchValue(true);
      this.form.controls['outerBulkhead'].patchValue(true);
      this.form.controls['innerBulkhead'].patchValue(true);
    }
    else {
      this.form.controls['longiBulkhead'].patchValue(false);
      this.form.controls['outerBulkhead'].patchValue(false);
      this.form.controls['innerBulkhead'].patchValue(false);
    }
  }

  checkBoxLongiClick(e){
    this.checkBoxSubLongiClick();
  }

  checkBoxOuterLongiClick(e){
    this.checkBoxSubLongiClick();
  }

  checkBoxInnerLongiClick(e){
    this.checkBoxSubLongiClick();
  }

  checkBoxSubLongiClick() {
    if (this.form.get('longiBulkhead').value &&
      this.form.get('outerBulkhead').value &&
      this.form.get('innerBulkhead').value) {
      this.form.controls['AllBulkhead'].patchValue(true);
    } else {
      this.form.controls['AllBulkhead'].patchValue(false);
    }
  }

我想做的是当我点击 AllBulkhead 复选框时，我想选中/取消选中它的所有 3 个子复选框，即 longiBulkhead, outerBulkhead,innerBulkhead

下面是我的代码在我取消勾选 3 个子复选框中的任何一个时出现意外行为，因此它不会取消选中父复选框，即 AllBulkhead 复选框

我在哪里犯了错误，有人可以帮助我吗？提前致谢!

Answer 1

我认为问题在于更改“全部”选项也会触发其他选项的更改，同时尝试再次更改“全部”选项。这不是很容易注意到，但是如果你添加一些 console.log('...'); 你会发现更新选项状态的方法调用了几个比您预期的次数更多。

处理此问题的更好方法是将“全部”选项保留在表单之外。这背后的原因是“全部”选项并不是真正的选项，而是基于其他选项状态的副作用。通过将其保留在表单之外，我们可以控制何时以及如何更新它，而不会有任何与选项更改相关的问题在幕后触发另一个选项的更改。

另请注意，自 Ionic 4.1.0 起ion-checkbox 组件有一个 indeterminate 状态，可能对这种情况很有用。这是一种常见的 UI/UX 做法，如果您只选择几个选项中的一些(但不是全部)而不是将“全部”选项显示为未选中，它会显示为不确定状态。 p>

无论如何，请看这个 working Stackblitz demo :

就像您在演示中看到的那样，我将“全部”选项的状态保留在表单之外:

  public form: FormGroup;

  public allOptionStateChecked = false;
  public allOptionStateIndeterminate = false;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      option1: false,
      option2: false,
      option3: false
    });
  }

我正在使用这些属性手动设置它的状态(也使用 click 处理程序而不是 ionChange):

<ion-item (click)="onAllChange()" lines="none">
  <ion-checkbox 
    slot="start" 
    [checked]="allOptionStateChecked"
    [indeterminate]="allOptionStateIndeterminate">
  </ion-checkbox>
  <ion-label>All</ion-label>
</ion-item>

我还有一些辅助方法可以告诉我是否选中了所有或部分选项:

  private allChecked(): boolean {
    const option1Value = this.form.get("option1").value;
    const option2Value = this.form.get("option2").value;
    const option3Value = this.form.get("option3").value;

    return option1Value && option2Value && option3Value;
  }

  private someChecked(): boolean {
    const option1Value = this.form.get("option1").value;
    const option2Value = this.form.get("option2").value;
    const option3Value = this.form.get("option3").value;

    return !this.allChecked() && (option1Value || option2Value || option3Value);
  }

所有这些都准备就绪后，只需要做两件事:

1. 当任何其他选项更改时更新“所有”选项状态
2. 单击“全部”选项时更新其余选项。

  public onAllChange(): void {
    const nextValue = this.allChecked() ? false : true;

    this.form.get("option1").patchValue(nextValue);
    this.form.get("option2").patchValue(nextValue);
    this.form.get("option3").patchValue(nextValue);
  }

  public onOptionChange(): void {
    this.allOptionStateChecked = this.allChecked();
    this.allOptionStateIndeterminate = this.someChecked();
  }

请注意，我没有在 onAllChange() 方法中更新 allOptionStateChecked 和 allOptionStateIndeterminate。由于“全部”选项的状态是基于其他选项状态的副作用，因此它的状态在 onOptionChange() 中更新。

编辑

根据您的评论，我更新了 Stackblitz demo 还包括“全部”选项作为表单的一部分，但是，与您的代码的不同之处在于我手动设置“全部”选项的状态，而不是将其绑定(bind)到 View 使用类似 formControlName="all" 的东西:

  ...

  ngOnInit() {
    this.form = this.formBuilder.group({
      all: false, // <-- added this to the form
      option1: false,
      option2: false,
      option3: false
    });
  }

  ...

  public onOptionChange(): void {
    this.allOptionStateChecked = this.allChecked();
    this.allOptionStateIndeterminate = this.someChecked();

    // Added this line at the end of the method!
    this.form.get("all").patchValue(this.allOptionStateChecked);
  }