个人觉得primeng提供了很多比较好看的组件,包括输入框input、表格table、按钮button、交互框dialog等等,样式要比angular material好看一些,也比较好上手,官网提供了很多示例代码以及参数的使用说明。
但是某些组件的元素样式说明可能没有很直接,所以想开这篇文章,介绍一下我在使用其中一些组件时遇到的问题,以及对应的解决方案,包括一些内部元素的css设置。
multiselect / multi-select
options绑定的变量发生变化
虽然官网文档中options中可以传入selectedItem类变量,也可以传入自定义的类变量,但是只有使用selectedItem时才能检测到变量在其他地方的更新。
选择项获取: 判断选中项的变化
可以通过ngModel进行双向绑定,也可以通过$event.value获得当前被选择的item list。
如何判断何时选中项发生了变化以及变化了什么: onChange能够检测变化,只要选中项发生变化就会触发onChange。这样绑定一个操作(onChange)=”changeOperation($event)”就可以在有变化时进行函数调用,$event.value获得当前所有被选择的item_list,\$event.itemValue可以获得当前操作 (选中或者取消选中) 的item,通过item_list.includes(item)就可以判断当前操作到底是选中操作还是取消操作。
数据item list样式设置
例如:原本默认下拉框中展示的是string字符串,options中提供所有可选列表,那如果我们想根据options中的数据重新设计一些样式,例如调整颜色等,可以使用ng-template指定pTemplate=”item”,即可对每个option进行样式设计,如:
<p-multiSelect defaultLabel="Tags" [dropdownIcon]="dropDownIcon" class="multiselect" [options]="items" [(ngModel)]="selectedItems" name="selectedItems" maxSelectedLabels=0 [panelStyle]="{minWidth:'12em'}" scrollHeight="100px">
<ng-template