import { Component , OnInit , ViewChild } from '@angular/core' ; import { MatPaginator } from '@angular/material/paginator' ; import { MatSort } from '@angular/material/sort' ; import { MatTableDataSource } from '@angular/material/table' ; import { SelectionModel } from '@angular/cdk/collections' ; import { Role } from '../role/role.interface' ; @ Component ( { selector : 'roles' , templateUrl : './roles.component.html' , styleUrls : [ './roles.component.scss' ] } ) export class RolesComponent implements OnInit { dataSource : MatTableDataSource < Role > ; displayedColumns : Array < string > ; selection : SelectionModel < Role > ; @ ViewChild ( MatPaginator , { static : true } ) paginator : MatPaginator ; @ ViewChild ( MatSort , { static : true } ) sort : MatSort ; constructor ( ) { } ngOnInit ( ) { this . dataSource = new MatTableDataSource ( [ { id : '1' , name : '管理员' , status : true , description : '描述' } , { id : '2' , name : '普通用户' , status : false , description : '描述' } ] ) ; this . displayedColumns = [ 'select' , 'id' , 'name' , 'status' , 'description' , 'actions' ] ; this . selection = new SelectionModel < Role > ( true , [ ] ) ; this . dataSource . paginator = this . paginator ; this . dataSource . sort = this . sort ; } applyFilter ( filterValue ) { this . dataSource . filter = filterValue . trim ( ) . toLowerCase ( ) ; if ( this . dataSource . paginator ) { this . dataSource . paginator . firstPage ( ) ; } } /** 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 ; } /** 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 ) ) ; } }