多选隐藏标签容器（primeNg）

Question

我试图让 multiselect 下拉菜单只显示箭头图标，即使项目是 selected（即删除 "choose" 默认标签，因为以及任何 selected 项目）。

可能吗？

我的多select代码是：

<p-multiSelect 
  [options]="cars" 
  optionLabel="brand"
  [style]="{'border': 'none'}">
</p-multiSelect>

我试图隐藏标签容器元素...但标签仍然显示

.ui-multiselect-label {
display:none !important;
}

下面是一个 stackblitz https://stackblitz.com/edit/angular-ba5zqd

Answer 1

由于 Angular style isolation, you have to use the ::ng-deep 阴影穿透后代组合器修改子组件的 CSS 样式：

:host ::ng-deep .ui-multiselect-label {
  visibility: collapse;
  overflow: hidden;
  white-space: nowrap;
}

有关演示，请参阅 this stackblitz。