Angular devui 表格组件中自定义模板的使用

发布于 2022-09-12 13:36:39 字数 936 浏览 40 评论 0

我的前端项目使用的是 Angular10 + devui10(华为针对Angular10的前端控件集)。跟着官方的案例在试验组件 DataTable 的功能,官方提供的案例地址是 https://devui.design/componen...,进入后点击右边的“表格交互”,展开该案例的代码可以看到列 Last Name 的过滤方法中使用了 ng-template ,如下图所示
image
该 ng-template 中显示了多个待选项要素,勾选后进行过滤,执行的效果如下图
image
官方的代码是显式的指定了该过滤方式所属的列,那么我的问题来了,如果我是通过循环将一个数组构建为 <th> ,我要如何将 <th> 的 field 传递到 ng-template 中,然后在 ts 文件中通过识别不同的 field 执行不同的逻辑。
怕自己表述不清换个表达方式:
上面的gif 中的4个列:First Name,Last Name,Gender,Date of birth(后面没有显示出的字段就忽略了)
如果我将这4个列保存到一个数组中,通过下面的方式循环创建

<th dHeadCell *ngFor="let col of columns" [customFilterTemplate]="customFilterTemplate">

可以看到上面通过属性 [customFilterTemplate] 指定了用于显示过滤功能的 ng-template,其中有按钮执行“过滤”功能,那么我在点击这个按钮的时候如何知道当前要针对哪个列进行过滤?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文