Блог

Я пытаюсь установить флажки с возможностью выбрать все и отменить выбор всех параметров.

Я столкнулся с проблемой, которая,

сначала я проверил все опции(это работает), во-вторых, я снял один или несколько флажков(НЕ все)(это тоже работает). наконец я проверяю все опции(это не работает)

(когда я выбираю все параметры, это нормально ( все флажки установлены), когда я отменяю выбор всех параметров, это нормально ( все флажки сняты))

Выход есть :

файл .component.ts

 checkedRow = false;
checkedAll = false;
checkedRows = [];


AllSelectedHandler(checked: boolean, book) {
    const idArr = book.map(i => i.id);
    console.log("ID array "   idArr);

    if (checked == true) {
      this.checkedAll = true;
      this.checkedRow = true;

      idArr.forEach(id => {

        if (this.checkedAll == true) {
          this.checkedRow = true;
          console.log("checkedRow works ")
          console.log(this.checkedRow)
        }

        if (this.checkedRows.includes(id)) {
          this.checkedRows.push();
          console.log("if works");
        }
        else {
          this.checkedRows.push(id);
         // this.checkedRow = true;
          console.log("else works");
          console.log("id is "   id);
        }

      });

      console.log(this.checkedRows);
      console.log("checked row"   this.checkedRows);

      const numSelected = this.checkedRows.length;
      console.log("no of selected"   numSelected);
    }
    else {
      this.checkedAll = false;
      this.checkedRow = false;
      this.checkedRows = [];
      this.multipleDelete = false;
      console.log(this.checkedRows);
    }
    const numRows = this.books.length;
    console.log("no of rows "   numRows);
}
 

.html

 <nb-checkbox 
  [value]= "books" 
  [checked]="checkedAll" 
  (checkedChange)="AllSelectedHandler($event, books)" >
</nb-checkbox>
                        
<nb-checkbox 
  value={{data.id}} 
  [checked]="checkedRow"
  (checkedChange)="CheckboxChangeHandler($event, data.id)">
</nb-checkbox>
 

В консоли:

 ID array 23,22,21,2,1

checkedRow works 
true
else works
id is 23

checkedRow works 
true
else works
id is 22

checkedRow works 
true
if works

checkedRow works 
true
if works

checkedRow works 
true
if works

(5) [21, 2, 1, 23, 22]

checkedrows 21,2,1,23,22

no of selected 5

no of rows 5
 

Здесь обратите внимание, что все значения checkedRow являются истинными. Но флажок в выводе снят.

Пожалуйста, может ли кто-нибудь сказать мне, в чем проблема?

Вы сохраняете второй массив(например, SelectedItems), как и сейчас, для хранения выбранных элементов. При установке флажка просто переместите элемент в этот массив.

Чтобы выбрать все, просто скопируйте исходный массив в SelectedItems. Чтобы отменить выбор, установите для него значение [ ].

Затем просто установите флажки, когда SelectedItems содержит элемент.

В шаблоне:

 ...
[checked]="inSelectedItems(id)"
...
 

В компоненте:

 inSelectedItems(id: number): boolean {
  return selectedItems.includes(id)
}
 

Таким образом, нет необходимости во всех проверках и предварении.