Установите флажок "Все" Угловой материал 5 | Стиль Gmail, если выбрать индивидуальный, он также выберет

Мне нужно выделить все функции в угловом материале, я делюсь кодом ниже, который частично работает.

<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.info(this.selectAll);
        if (this.selectAll === true) {
            this.pizzaIng.map((pizza) => {
                pizza.checked = true;
            });

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

выбрать все / отменить выбор работает, но отдельный выбор не работает должным образом, если выбран первый, он выбирает все, но он должен работать, когда выбраны все отдельные, пожалуйста, помогите.

updateCheck - это для отдельных флажков, когда они отмечены / сняты вручную, родительский флажок не включается (selectAll / UnSelectedAll), это правильно?

— 02.01.2019 05:27

проверка обновлений предназначена для всех флажков select / deselect и selectChildren будет проверять каждый отдельный выбор и обновлять select all, когда все выбраны

— 02.01.2019 05:28

ваш подход странный, вы должны иметь *ngFor только для детей. вы можете исправить вышеупомянутую проблему с помощью $ .grep и проверить, есть ли какие-либо непроверенные на основе этого флага selectAll поворота (true / false).

— 02.01.2019 05:33

javascript angular angular-material

02.01.2019 05:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 191

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Просто измените свой selectchildren на это, использование каждый проверит все флажки, и все должно работать нормально. У вас уже есть свойство checked, значения которого указаны как отмеченные или нет, вы можете проверить, все ли записи отмечены, затем вы можете включить selectAll, иначе отключите его.

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

Вот демонстрация

02.01.2019 05:35

HTML

<mat-table [dataSource] = "dataSource">
<ng-container matColumnDef = "select">
    <mat-header-cell *matHeaderCellDef class = "customMatCheckContainer">
        <mat-checkbox (change) = "$event ? masterToggle() : null"
                    [checked] = "selection.hasValue() && isAllSelected()"
                    [indeterminate] = "selection.hasValue() && !isAllSelected()">
        </mat-checkbox>
    </mat-header-cell>
    <mat-cell *matCellDef = "let row" class = "customMatCheckContainer">
        <mat-checkbox (click) = "$event.stopPropagation()"
                    (change) = "$event ? selection.toggle(row) : null"
                    [checked] = "selection.isSelected(row)">
        </mat-checkbox>
    </mat-cell>
</ng-container>

<ng-container matColumnDef = "displayName">
    <mat-header-cell *matHeaderCellDef> Display Name </mat-header-cell>
    <mat-cell *matCellDef = "let row"> {{row.displayName}} </mat-cell>
</ng-container>

<ng-container matColumnDef = "userEmail">
    <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
    <mat-cell *matCellDef = "let row"> {{row.email}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef = "displayedColumns"></mat-header-row>
<mat-row *matRowDef = "let row; columns: displayedColumns;" (click) = "selection.toggle(row)"></mat-row>

TS

Импортируйте следующие модули в свой файл модуля: MatTableModule, MatCheckboxModule, MatSelectModule

Вы получите все выбранные записи в переменной «выбор».

import { MatSort, MatTableDataSource } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';

displayedColumns = ['select', 'displayName', 'userEmail'];
dataSource: MatTableDataSource<any>;
selection = new SelectionModel<Element>(true, []);

constructor() {
    this.dataSource = new MatTableDataSource(this.data);
}

public isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
}

public masterToggle() {
    this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
}

02.01.2019 05:40

более короткое решение находится в вашем html, нет необходимости добавлять условия if и else

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

в тебе .ts

isAllChecked() {
    return this.pizzaIng.every(obj => obj.checked);
  }

  checkAll() {
     this.pizzaIng.forEach(obj => obj.checked = this.selectAll);
  }

вот ссылка рабочего демонстрация

02.01.2019 05:41