有人知道是否可以创建一个与 mat-table 一起使用的“列”组件,我尝试为常用的列定义创建一个组件,但是在添加到表时出现错误,无法找到列选择器,我的列定义如下:
@Component({
selector: 'iam-select-column',
template: `
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef>
<mat-checkbox></mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-checkbox></mat-checkbox>
</mat-cell>
</ng-container>
`,
styles: [`
`]
})
export class SelectColumnComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
并在表中使用它
<mat-table class="mat-elevation-z8">
<iam-select-column></iam-select-column>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
显示的列是:
displayedColumns = [
'select'
];
是否可以这样做,因为我想避免在具有选择列的表中出现重复?
为了使其工作,你必须添加columnDef
使用手动到表table.addColumnDef
method.
@Component({
selector: 'iam-select-column',
template: `
<ng-container matColumnDef="select">
...
</ng-container>
`
})
export class SelectColumnComponent implements OnInit {
@ViewChild(MatColumnDef) columnDef: MatColumnDef;
constructor(@Optional() public table: MatTable<any>, private cdRef: ChangeDetectorRef) { }
ngOnInit() {
if (this.table) {
this.cdRef.detectChanges();
this.table.addColumnDef(this.columnDef);
}
}
}
但在这样做之前我们必须确保matColumnDef
指令已经完成绑定初始化,因此它已经name
。为此,我们必须在该组件上运行 detectorChanges。
NG 运行示例
另一种方法是在父组件中提供该名称,如角度材料问题中所述https://github.com/angular/material2/issues/13808#issuecomment-434417804:
父级.html
<mat-table class="mat-elevation-z8">
<iam-select-column name="select"></iam-select-column>
选择列组件
@Input()
get name(): string { return this._name; }
set name(name: string) {
this._name = name;
this.columnDef.name = name;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)