3

我是角度/离子的新手

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

这是我已经厌倦但无法正常工作的代码：

主页.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>

主页.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复选框

我在哪里犯错有人可以帮助我吗？ 先感谢您！

4

3 回答 3

3

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

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

另请注意，从Ionic 4.1.0开始，ion-checkbox组件的indeterminate状态可能对此类场景有用。这是一种常见的 UI/UX 实践，如果您只选择几个选项中的一些（但不是全部）而不是将“全部”选项显示为未选中，它会显示为不确定状态。

无论如何，请看一下这个有效的 Stackblitz 演示：

Stackblitz 演示

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

  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();
  }

请注意，我不更新allOptionStateChecked和方法allOptionStateIndeterminate。onAllChange()由于“all”选项的状态是基于其他选项状态的副作用，因此它的状态会被更新onOptionChange()。

编辑

根据您的评论，我更新了Stackblitz 演示，将“全部”选项作为表单的一部分包含在内，但与您的代码不同的是，我手动设置了“全部”选项的状态，而不是将其绑定到使用类似的视图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);
  }
于 2020-12-25T15:31:58.940 回答
0

(click)不在(ionChange)HTML 中使用。由于ionChange是在选中的属性发生更改时发出的，因此更改复选框表单值也会触发它们的ionChange，这是不必要的，并会产生这种意外行为。

于 2020-12-21T16:51:28.930 回答
0

(ionChange) 实际上是一个很好的做法。

作为一个快速的解决方案，我会在每次更改复选框时重建表单。

在 .ts 中：

private AllBulkhead = false;
private ..... [add all your checkbox values here]

constructor(private _fb: FormBuilder){
    this.buildForm();
}

buildForm() {
    this.form = this._fb.group({
          AllBulkhead: this.AllBulkhead,
          longiBulkhead: this.longiBulkhead,
          outerBulkhead: this.outerBulkhead,
          innerBulkhead: this.innerBulkhead,
    });
}

checkboxClickHandler(var, value) {
    // this is called with (ionChange) from html
    // change the value ( this.AllBulkhead = value )
    this.buildForm() // rebuild form with correct values
}

祝你好运！

于 2020-12-22T13:21:14.690 回答