javascript - 如果所有变量都为真，则返回真

Question

在我的 Angular 组件中，我有以下代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myApp',
  templateUrl: './my-app.component.html',
  styleUrls: ['./my-app.component.scss']

})
export class MyApp implements OnInit {

  accordion1: boolean;
  accordion2: boolean;
  accordion3: boolean;
  accordionAll: boolean;

  constructor() { }

  ngOnInit() {
  }

  toggleAll(): void {
    this.accordionAll1 = !this.accordionAll
    this.accordion1 = this.accordionAll;
    this.accordion2 = this.accordionAll;
    this.accordion3 = this.accordionAll;
  }
}

所以有了这个我可以有单独的按钮，可以将状态切换为真或假，例如：

<div (click)="accordion1 = !accordion1" [ngClass]="accordion1 ? 'is-active' : ''"></div>

或者，如果我单击具有以下内容的按钮，我可以同时将它们全部设为真或假：

<div (click)="toggleAll()" [ngClass]="accordionAll ? 'is-active' : ''"></div>

这按预期工作。但是，如果起始状态accordionAll为假，并且所有其他状态都单独单击为真状态，accordionAll则将保持为假。但我想要的是，如果所有其他人单独为真或为假，它就会变为真。

标签： javascriptangular

Answer 1

this.accordionAll仅当accordion1,accordion2和accordion3为真时才为真

和

this.accordionAll仅当accordion1或accordion2或accordion3为假时才会为假

在模板中：

<div (click)="accordion1 = !accordion1; shouldToggleAll()" [ngClass]="accordion1 ? 'is-active' : ''"></div>
<div (click)="accordion2 = !accordion2; shouldToggleAll()" [ngClass]="accordion2 ? 'is-active' : ''"></div>
<div (click)="accordion3 = !accordion3; shouldToggleAll()" [ngClass]="accordion3 ? 'is-active' : ''"></div>

在 ts 文件中

  shouldToggleAll() {
    this.accordionAll = this.accordion1 && this.accordion2 && this.accordion3;
  }

演示