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

葬天尘
  • 265

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

回复
阅读 1.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏