Моя проблема в том, что я хотел бы использовать выбор из таблицы материалов, но по какой-то причине он имеет свое место на поверхности, но флажок не отображается.
Это мой код HTML :
<table mat-table [dataSource]="dataSource" mat-elevation-z8>
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
[aria-label]="checkboxLabel()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
[aria-label]="checkboxLabel(row)">
</mat-checkbox>
</td>
</ng-container>
<!-- ... -->
</table>
И мой файл TS:
import { MatTableDataSource } from '@angular/material/table';
import { SelectionModel } from '@angular/cdk/collections';
export abstract class MyClass implements OnInit {
devizas: DevizaInterface[] = [
{
id: '1',
name: 'dollar',
code: 'USD' ,
}
//...
];
dataSource = new MatTableDataSource<DevizaInterface>(devizas);
selection = new SelectionModel<DevizaInterface> (true, []);
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
checkboxLabel(row?: PeriodicElement): string {
if (!row) {
return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
}
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.id + 1}`;
}
}
Я сделал все так, как написано в документации, ничего плохого в других функциях (сортировка, фильтрация) нет. В app.module.ts я импортировал все необходимое для этого. В чем может быть проблема? Какую часть я не написал для этого хорошо?