css - 如何使 ng-select 删除和只读

Question

在我的 Angular 应用程序中，我有一个ng-select小部件的实例：

如果单击它，默认情况下您可以搜索项目并将更多项目添加到当前选择中：

我想更改此默认行为，特别是：

• 应该不可能添加新元素
• 单击它不应打开搜索栏或项目列表
• 它不应该显示向下箭头图标（默认显示在右侧）
• 它不应该显示X 图标来一次删除所有选择（默认显示在右侧）

所以这就是我想要的样子：

Answer 1

为了实现这一点，我们首先需要创建 3 个 css 类。

一种禁用向下箭头图标：

.ng-select.disable-arrow .ng-arrow-wrapper .ng-arrow {
  display: none;
}

一种禁用搜索/列表下拉菜单：

.ng-select.disable-dropdown ng-dropdown-panel {
  display: none;
}

一种禁用清除所有 X 图标：

.ng-select.disable-clear-all .ng-clear-wrapper {
  display: none;
}

然后我们ng-select使用我们创建的 3 个 css 类添加元素，以及一些选项：

<ng-select
  class="disable-arrow disable-dropdown disable-clear-all"
  [searchable]="false"
  [clearable]="true"
  [multiple]="true"
>
</ng-select>

Answer 2

要禁用全部清除 X 图标，请将[clearable]="false"属性添加到您的ng-select选项卡前：

<ng-select class="disable-clear-all" [clearable]="false" [searchable]="false">
</ng-select>

Answer 3

如果您以编程方式需要它，以下只是您需要的。

<ng-select
    [items]="people3"
    bindLabel="name"
    [disabled]="true"
    [multiple]="true"
    [(ngModel)]="selectedPeople3">
</ng-select>

Answer 4

要隐藏清除和箭头图标：

.ng-clear-wrapper {display: none;}

.ng-arrow-wrapper {display: none;}