I am trying to do check boxes with select all and deselect all options.
I have faced an issue that,
first I checked all option(that works), secondly I uncheck one or more checkboxs(NOT CheckALL one)(that is also works). finally i check all option(This does not works)
(when I select all options that is OK ( all checkbox are checked) when I deselect all options that is OK ( all checkbox are unchecked))
Output is :
.component.ts file
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= [checked]="checkedRow"
(checkedChange)="CheckboxChangeHandler($event, data.id)"></nb-checkbox>
In console:
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
Here notice that All checkedRow values are true. But in output check box is unchecked.
Please can anyone tell what is the issue?
Aucun commentaire:
Enregistrer un commentaire