Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.0k views
in Technique[技术] by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...