我的前端项目使用的是 Angular10 + devui10(华为针对Angular10的前端控件集)。跟着官方的案例在试验组件 DataTable 的功能,官方提供的案例地址是 https://devui.design/componen...,进入后点击右边的“表格交互”,展开该案例的代码可以看到列 Last Name 的过滤方法中使用了 ng-template ,如下图所示
![image image](https://cdn.ostack.cn/v-5feb05cf/global/img/squares.svg)
该 ng-template 中显示了多个待选项要素,勾选后进行过滤,执行的效果如下图
![image image](https://cdn.ostack.cn/v-5feb05cf/global/img/squares.svg)
官方的代码是显式的指定了该过滤方式所属的列,那么我的问题来了,如果我是通过循环将一个数组构建为 <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,其中有按钮执行“过滤”功能,那么我在点击这个按钮的时候如何知道当前要针对哪个列进行过滤?
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…