My issue involves a <mat-radio-button> list. I am encountering an error where the first radio button stops functioning after toggling between the first and second buttons. Additionally, when I click the delete button, it deletes both the first and second rows simultaneously.
For further details, I have included the relevant code below along with a Demo link for your convenience.
HTML
<div class="example-container mat-elevation-z8">
<mat-chip class="pointer" mat-raised-button color="primary" (click)="removeSelectedRows()">
Remove Selected Rows
</mat-chip>
<mat-table #table [dataSource]="dataSource">
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-radio-button (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-radio-button>
</mat-cell>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </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>
</mat-table>
<mat-paginator #paginator
[pageSize]="3"
[pageSizeOptions]="[5, 10, 20]"
>
</mat-paginator>
</div>
Component
displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
data = Object.assign( ELEMENT_DATA);
dataSource = new MatTableDataSource<Element>(this.data);
selection = new SelectionModel<Element>(true, []);
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
constructor(){
console.log(this.data);
}
/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
removeSelectedRows() {
console.log(this.selection.selected)
this.selection.selected.forEach(item => {
let index: number = this.data.findIndex(d => d === item);
console.log(this.data.findIndex(d => d === item));
this.dataSource.data.splice(index,1);
this.dataSource = new MatTableDataSource<Element>(this.dataSource.data);
});
this.selection = new SelectionModel<Element>(true, []);
console.log(this.selection)
}
/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
}
Thank you for your attention to this matter.