如何从primeng multiSelect中删除复选框？

Question

我尝试使用“ng-template”仅显示标签，但默认情况下仍显示复选框。如何更改此默认行为？

这里是使用的代码

ng-template

...... `

<p-multiSelect [options]="conditionList" formControlName="condition" defaultLabel="Select Conditions"
    [showToggleAll]="false" scrollHeight="300px">
   <ng-template let-condition pTemplate="item">
     <div>{{condition.label}}</div>
   </ng-template>
</p-multiSelect>`

Answer 1

您需要自定义 MulitiSelect 样式来克服 View Envapsulation。可以通过三种方式完成：

1. 将选择器置于全局样式中，例如样式.scss：

p-multiselect
.p-multiselect-panel
.p-multiselect-items
.p-multiselect-item
.p-checkbox {
   display: none;    
}

2. 将上述覆盖放入 compoennt.scss 中，但添加 ::ng-deep:

::ng-deep {
    p-multiselect
    .p-multiselect-panel
    .p-multiselect-items
    .p-multiselect-item
    .p-checkbox {
       display: none;    
    }
}

3. 没有 ::ng-deep 但禁用视图封装：

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

Answer 2

1：创建两个新的 theme.scss 条目：

   .disable-check .p-multiselect-panel .p-multiselect-header .p-checkbox {
    display:none;
   }

   .disable-check .p-multiselect-panel .p-multiselect-items .p-checkbox {
    visibility:hidden;
   }

2：为 p-multiselect 元素添加禁用检查类：

   <p-multiSelect class="disable-check" [group]="true" optionLabel="item" 
   optionValue="valor"  [options]="ItemOptions" >