javascript - 选择所有复选框 Angular Material 5 | Gmail 样式如果选择个人它也会选择

Question

我需要在 Angular Material 中创建一个选择所有功能，我在下面共享部分工作的代码。

<section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
  <mat-checkbox (change)="selectChildren()"
     [(ngModel)]="ing.checked">
    {{ing.name}}
  </mat-checkbox>
</section>
  <mat-checkbox (change)="updateCheck()"
      class="example-margin"
      [(ngModel)]="selectAll">
    Select All
  </mat-checkbox>

.ts 文件

export class CheckboxConfigurableExample {
    pizzaIng: any;
    selectAll = false;

    constructor() {
        this.pizzaIng = [{
                name: "Pepperoni",
                checked: false
            },
            {
                name: "Sasuage",
                checked: true
            },
            {
                name: "Mushrooms",
                checked: false
            }
        ];
    }


    selectChildren() {

        for (var i = 0; i < this.pizzaIng.length; i++) {
            if (this.pizzaIng[i].checked === true) {
                return this.selectAll = true;
            } else {
                return this.selectAll = false;
            }

        }
    }




    updateCheck() {
        console.log(this.selectAll);
        if (this.selectAll === true) {
            this.pizzaIng.map((pizza) => {
                pizza.checked = true;
            });

        } else {
            this.pizzaIng.map((pizza) => {
                pizza.checked = false;
            });
        }
    }
}  

选择ALL/DESECT正在起作用，但是单个选择无法正常工作，如果选择了第一个选择，则选择全部选择，但在选择所有个人时应使用，请帮助。

。

Answer 1

只需将您的 selectchildren 更改为此，使用 every将检查所有复选框是否已选中，它应该可以正常工作。您已经有一个选中的属性，它的值是否选中，您可以检查是否所有条目都被选中，然后启用 selectAll，否则禁用它。

  selectChildren() {    
    if (this.pizzaIng.every(a => a.checked)) {
      this.selectAll = true;
    } else {
      this.selectAll = false;
    }
  }

这是 demo