Estoy tratando de hacer un componente de casilla de verificación personalizado.

cuando marqué la casilla de verificación Todo, el valor de _selectedItems cambió en el archivo .ts, pero no en la interfaz de usuario.

De manera similar, después de marcar todas las casillas de verificación (es decir, _selectedItems = allData ), el valor ha cambiado, PERO en la interfaz de usuario, no está seleccionado el valor marcado.

mi componente personalizado.html

 <nb-checkbox *ngIf="_headerOrBody ==='header'" (checkedChange)="OnCheckBoxchangeAll(_allData)" [checked]="_checkedAll" ></nb-checkbox> <nb-checkbox *ngIf="_headerOrBody === 'body'" (checkedChange)="OnCheckBoxchange(_data, $event)" [checked]="_selectedItems.indexOf(_data) >=0" ></nb-checkbox>

componente-personalizado.ts

 OnCheckBoxchange(_data, isChecked: boolean) { if (isChecked === true) { this._selectedItems.push(_data); this._selectedItems = [...this._selectedItems]; } else { this._selectedItems.splice(this._selectedItems.findIndex(x => x.id === _data.id), 1); this._selectedItems = [...this._selectedItems]; } // check arrays are same const array2Sorted = this._allData.slice().sort(); var isSame = this._selectedItems.length === this._allData.length && this._selectedItems.slice().sort().every(function (value, index) { return value === array2Sorted[index]; }); if (isSame) { this._checkedAll = true; } console.log("this._selectedItems", this._selectedItems); console.log("this._allData", this._allData); } OnCheckBoxchangeAll(_data) { this._checkedAll = !this._checkedAll; if (this._checkedAll === true) { this._selectedItems = [..._data]; } else { this._selectedItems = []; } console.log("this._selectedItems", this._selectedItems); console.log("this._allData", this._allData); } }

vacaciones.componente.ts

 // inside <thead> <ngx-custom-checkbox [headerOrBody]="'header'" [allData]="holidays" [data]="data" [(selectedItems)]="selectedItems"> </ngx-custom-checkbox> // inside <tbody> <ngx-custom-checkbox [headerOrBody]="'body'" [allData]="holidays" [data]="data" [(selectedItems)]="selectedItems"> </ngx-custom-checkbox>

marcar una casilla de verificación funciona bien Si marca todas las casillas de verificación, la casilla de verificación checkAll debe marcar (esto no funciona) Si la casilla de verificación checkAll está marcada, entonces todas las casillas de verificación deben marcar (esto no funciona) I supongo que el problema se debe a *ngIf="_headerOrBody ==='header'" y *ngIf="_headerOrBody === 'body'" . Pero no estoy seguro. ¿Algunas ideas?