问答

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

作者:admin 2021-05-13 我要评论

我的前端项目使用的是 Angular10 + devui10(华为针对Angular10的前端控件集)。跟着官方的案例在试验组件 DataTable 的功能,官方提供的案例地址是 https://devui...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

我的前端项目使用的是 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,其中有按钮执行“过滤”功能,那么我在点击这个按钮的时候如何知道当前要针对哪个列进行过滤?

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • Angular devui 表格组件中自定义模板的

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

  • React如何实现popover气泡卡片功能?

    React如何实现popover气泡卡片功能?

  • vscode 编写插件时候左侧活动栏顶部的

    vscode 编写插件时候左侧活动栏顶部的

  • flutter如何拆分不同文件WIDGET,然后

    flutter如何拆分不同文件WIDGET,然后

腾讯云代理商
海外云服务器