I want to restore the mat-checkbox selection using http Observable stream. The selection is not reflected on the page.
Below is the structure of the code. A mat-table with first column containing the checkbox column.
html
-- Checkbox is first column of mat-table
<table mat-table [dataSource]="fixture.dataSource"
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? fixture.selectionModel1.toggle(row) : null"
[checked]="fixture.selectionModel.isSelected(row)"
[disabled]="fixture.selectionModel.selected.length >3 && !fixture.selectionModel1.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
component.ts
this.fixture.dataSource = this.route.snapshot.data['fixtureresolver']
//structure of fixture object
fixture ={
dataSource = [some data]
selectionModel = new SelectionModel<Player>(true, [])
}
e.g. I have saved checkbox selection in monogdb from where I will retrieve the row identifier using httpclient, however just for sake of testing, i am first simply trying to select all the checkboxes by passing the row from the dataSource into the SelectionModel.select(row) function.
fixture.selectionModel.clear()
fixture.dataSource.subscribe(ds1=>{
ds1.forEach(row => {
fixture.selectionModel.select(row)
});
})
this.cdr.detectChanges()
Here is how selectionModel object looks on page load. It shows that _selected has 23 rows, but does reflect on the UI. However the [disabled] constraint is working as all checkboxes are in disabled state
Aucun commentaire:
Enregistrer un commentaire