ngx-datatable列使用角组件
ngx-datatable列使用角组件
提问于 2020-04-20 11:29:18
我经常在我的应用程序中使用，我想为该列及其各自的标题提供一些通用模板。
现在我已经
<ngx-datatable #myTable
XXX>
<ngx-datatable-column
name="selection">
<ng-template let-column="column" ngx-datatable-header-template>
<app-component-header-table></app-component-header-table>
</ng-template>
<ng-template let-row="row" ngx-datatable-cell-template>
<app-component-content-table></app-component-header-table>
</ng-template>
</ngx-datatable-column>
.... rest of the table ...
</ngx-datatable>我想要实现的是在一个文件/组件中包含内容的组件和包含头的组件。
并且或多或少地像这样使用它：
<ngx-datatable #myTable
XXX>
<ngx-datatable-column
name="selection">
<app-custom-column></app-custom-column>
</ngx-datatable-column>
.... rest of the table ...
</ngx-datatable>显然，可以访问内部的对象列和行。
回答 1
Stack Overflow用户
发布于 2020-05-23 16:57:56
在寻找更好的方法以避免中的复制方面浪费了大量的时间。这是我的解决办法：
创建新的组件-处理程序，我称之为- "custom-table".
- Provide到此组件行和cols @inputs
- Listen更改cols并用自定义表单元格重写列property.
- Declare ViewChild。
。
自定义表
export class CustomTableComponent implements OnInit, OnChanges {
columns = [];
@ViewChild('table', { static: false }) table: any;
@ViewChild('primary', { static: true }) primary: TemplateRef<any>;
@ViewChild('withAvatar', { static: true }) withAvatar: TemplateRef<any>;
@Input() rows: Array<any>;
@Input() cols: Array<Object>;
public selected: TableColumnModelExtended[] = [];
ngOnChanges(changes: SimpleChanges): void {
if (changes.hasOwnProperty('cols') && changes.cols.currentValue) {
this.updateCols();
}
}
ngOnInit() {
if (this.cols) {
this.updateCols();
}
}
updateCols(): void {
this.columns = this.cols.map((col: TableColumnModelExtended) => ({
...col,
cellTemplate: this[col.cellTemplate],
headerTemplate: this[col.headerTemplate],
}));
}
}定制-table.html
<div class="custom-table">
<ngx-datatable
#table
columnMode="force"
[rows]="rows"
[columns]="columns">
</ngx-datatable>
<!--COLUMN WITH AVATAR-->
<ng-template #withAvatar let-value="value" let-row="row">
<column-with-avatar [value]="value"></column-with-avatar>
</ng-template>
<!--PRIMARY COLUMN-->
<ng-template #primary let-value="value" let-row="row" let-column="column">
<column-primary [value]="value" [column]="column"></column-primary>
</ng-template>
</div>之后你就可以这样使用它了。
example-component.ts
export class ExampleComponent {
public columns: TableColumnModel[] = ExampleListColumns;
readonly valueList$: BehaviorSubject<DeliveryNote[]> = new BehaviorSubject([]);
}example-component.html
<custom-table
[rows]="valueList$ | async"
[cols]="columns">
</custom-table>example-component-table.config.ts
export const ExampleListColumns: TableColumnModelExtended[] = [
{
cellTemplate: 'primary',
name: 'Quantity',
prop: 'quantity',
cellClass: 'right',
},
{
cellTemplate: 'withAvatar',
name: 'Avatar',
prop: 'userAvatar',
}
];定义列配置时要小心。您应该在数组结束后使用而不是来使用额外的'，‘。
最后，您将得到一个表，该表使用配置来显示组件，不会一次又一次地重复html代码。
要添加新列类型，只需在组件中描述一次，并在组件中创建@ViewChild。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61321404
复制相关文章
相似问题
腾讯云开发者
