我在Angular 5项目中使用NG2智能表的COLS中使用过滤器。以下代码正常工作。
columns:
service_start_date: {
title: "DOS",
filter: true,
sort: true
},
但是,当单元格是链接类型的自定义组件时,这是不起作用的。我尝试了使用FilterFunction((的自定义过滤器。那也无效。
columns: {
id: {
title: "Enc #",
type: "custom",
renderComponent: LinkRenderComponent,
filter: true,
sort: true,
filterFunction(cell?: any, search?: string): boolean {
if (cell === search || search === '') {
return true;
} else {
return false;
}
}
},
这是我的linkRenderComponent的TS文件。
export class LinkRenderComponent implements ViewCell, OnInit {
constructor(
private router: Router
) { }
renderValue: string;
renderText: string;
hrefValue : string;
@Input() value: string | number;
@Input() rowData: any;
ngOnInit() {
this.renderValue = this.rowData.encounter_procedure_id;
this.renderText = this.rowData.encounter_id;
this.hrefValue = '/home/ar-report/' ;
}
}
我知道我可能必须在此文件中使用它。我在此文件中在哪里工作?如何将其传递到该文件中的"行"文本过滤器中的值?这似乎被配置为输入单元格中的值,而值集则是行。
no,它不适用于任何自定义属性(即不是基本属性(。这里有一个错误:https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-src/ng2-smart-table/lib/data-source/local/local/local.filter.filter.ts#l11馈送"作为任何非基础特性的过滤器功能的单元格值。
我所做的就是这样黑客入侵组件(上面的链接(:
return data.filter(function (el) {
//var value = typeof el[field] === 'undefined' || el[field] === null ? '' : el[field];
return filter.call(null, el, search);
});
并将整个元素传递到过滤器。然后,我在过滤器功能中具有该项目的全部内容。对我来说很好。
我使用其他提示(源文件中没有更改(。在基本方法中,过滤器将在您的案例字段中搜索带有名称" ID"的字段。因此,您可以简单地将另一个文本字段" IDFILTER"加入使用搜索内容,然后删除自定义过滤器功能:
columns: {
**idFilter**: {
title: "Enc #",
type: "custom",
renderComponent: LinkRenderComponent,
filter: true,
sort: true
}
},
组件中的ngoninit填充了IT字段:
export class LinkRenderComponent implements ViewCell, OnInit {
ngOnInit() {
this.renderValue = this.rowData.encounter_procedure_id;
this.renderText = this.rowData.encounter_id;
this.hrefValue = '/home/ar-report/' ;
**this.idFilter = "you search content";**
}
}