Primeng中一些组件的格式调整以及css设置

个人觉得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