src/app/tables/datatable/datatable.component.ts
| selector | app-datatable |
| styleUrls | ./datatable.component.scss |
| templateUrl | ./datatable.component.html |
Properties |
Methods |
constructor()
|
| isAllSelected |
isAllSelected()
|
|
Returns :
boolean
|
| masterToggle |
masterToggle()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| dataSource |
Default value : new MatTableDataSource<PeriodicElement>(ELEMENT_DATA)
|
| displayedColumns |
Type : string[]
|
Default value : [
'select',
'name',
'age',
'address',
'province',
'city',
'zip'
]
|
| selection |
Default value : new SelectionModel<PeriodicElement>(true, [])
|
import { Component, OnInit, Inject } from '@angular/core';
import { SelectionModel } from '@angular/cdk/collections';
import { MatTableDataSource } from '@angular/material';
export interface PeriodicElement {
name: string;
age: number;
address: string;
province: string;
city: string;
zip: number;
}
const ELEMENT_DATA: PeriodicElement[] = [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居',
province: '北京市',
city: '朝阳区',
zip: 100000
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗',
province: '北京市',
city: '海淀区',
zip: 100000
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道',
province: '上海市',
city: '浦东新区',
zip: 100000
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
province: '广东',
city: '南山区',
zip: 100000
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道',
province: '上海市',
city: '浦东新区',
zip: 100000
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
province: '广东',
city: '南山区',
zip: 100000
}
];
@Component({
selector: 'app-datatable',
templateUrl: './datatable.component.html',
styleUrls: ['./datatable.component.scss']
})
export class DatatableComponent implements OnInit {
displayedColumns: string[] = [
'select',
'name',
'age',
'address',
'province',
'city',
'zip'
];
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
selection = new SelectionModel<PeriodicElement>(true, []);
constructor() {}
ngOnInit() {}
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));
}
}
<h4>事件</h4>
<table mat-table [dataSource]="dataSource" class="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()"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>姓名</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<ng-container matColumnDef="age">
<th mat-header-cell *matHeaderCellDef>年龄</th>
<td mat-cell *matCellDef="let element">{{ element.age }}</td>
</ng-container>
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef>省份</th>
<td mat-cell *matCellDef="let element">{{ element.address }}</td>
</ng-container>
<ng-container matColumnDef="province">
<th mat-header-cell *matHeaderCellDef>市区</th>
<td mat-cell *matCellDef="let element">{{ element.province }}</td>
</ng-container>
<ng-container matColumnDef="city">
<th mat-header-cell *matHeaderCellDef>地址</th>
<td mat-cell *matCellDef="let element">{{ element.city }}</td>
</ng-container>
<ng-container matColumnDef="zip">
<th mat-header-cell *matHeaderCellDef>邮编</th>
<td mat-cell *matCellDef="let element">{{ element.zip }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
(click)="selection.toggle(row)"
></tr>
</table>
./datatable.component.scss
:host {
position: relative;
display: block;
margin: 24px;
}
table {
width: 100%;
}