试试这样：
包装表.ts
import { SelectionModel } from '@angular/cdk/collections';
import { AfterContentInit, Component, ContentChildren, Input, QueryList, TemplateRef, ViewChild } from '@angular/core';
import { MatColumnDef, MatHeaderRowDef, MatRowDef, MatTable, MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'ui-wrapper-table',
templateUrl: './wrapper-table.component.html',
styleUrls: ['./wrapper-table.component.scss']
})
export class WrapperTable<T> implements AfterContentInit {
@ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList<MatHeaderRowDef>;
@ContentChildren(MatRowDef) rowDefs: QueryList<MatRowDef<T>>;
@ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;
@ViewChild(MatTable, { static: true }) table: MatTable<T>;
@Input() columns: string[];
@Input() dataSource: MatTableDataSource<T>;
@Input() contextTemplate: TemplateRef<any>;
@Input() selection: SelectionModel<T>;
ngAfterContentInit() {
this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));
this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef));
}
isAllSelected() {
const numSelected = this.selection && this.selection.selected.length || 0;
const numRows = this.dataSource && this.dataSource.data.length || 0;
return numSelected === numRows;
}
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
checkboxLabel(row?: T): string {
if (!row) {
return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
}
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row`;
}
}
包装器-table.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-content></ng-content>
<!-- Select Column -->
<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>
<!-- Id Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> # </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<!-- Created Column -->
<ng-container matColumnDef="created">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Criação </th>
<td mat-cell *matCellDef="let element"> {{element.created.toDate() | date}} </td>
</ng-container>
<!-- Context Column -->
<ng-container matColumnDef="context">
<th mat-header-cell *matHeaderCellDef> Contexto </th>
<td mat-cell *matCellDef="let element">
<ng-container *ngTemplateOutlet="contextTemplate;context:{row:element}"></ng-container>
</td>
</ng-container>
</table>
公司.component.ts
import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
import { CompanyModel, GetAllCompaniesUsecase } from '@apps-waves/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'wave-companies',
templateUrl: './companies.component.html',
styleUrls: ['./companies.component.scss']
})
export class CompaniesComponent implements OnInit, OnDestroy {
displayedColumns: string[] = ['select', 'name', 'companyType', 'created', 'context'];
dataSource: MatTableDataSource<CompanyModel>;
selection: SelectionModel<CompanyModel>;
@ViewChild('sort', { static: false }) sort: MatSort;
onDestroy = new Subject<void>();
constructor(
private getAllCompanies: GetAllCompaniesUsecase
) { }
ngOnInit() {
this.getAllCompanies.execute()
.pipe(takeUntil(this.onDestroy))
.subscribe(companies => {
this.dataSource = new MatTableDataSource(companies);
this.selection = new SelectionModel<CompanyModel>(true, []);
this.dataSource.sort = this.sort;
})
}
onClick(company: CompanyModel) {
console.log(company);
}
ngOnDestroy() {
this.onDestroy.next();
this.onDestroy.complete();
}
}
公司.html
<ui-wrapper-table
[dataSource]="dataSource"
[columns]="displayedColumns"
[selection]="selection"
matSort #sort="matSort"
[contextTemplate]="rowContext">
<!-- Custom column definition to be provided to the wrapper table. -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="companyType">
<th mat-header-cell *matHeaderCellDef> Segmento </th>
<td mat-cell *matCellDef="let element"> {{element.companyType}} </td>
</ng-container>
<!-- Custom row definitions to be provided to the wrapper table. -->
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns; "></tr>
</ui-wrapper-table>
<ng-template #rowContext let-element="row">
<button type="button" mat-icon-button (click)="onClick(element)">
<mat-icon>edit</mat-icon>
</button>
</ng-template>
<pre>{{selection?.selected | json}}</pre>
它的工作很酷