如何使 ng-select 只读删除

Question

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

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

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

这就是我希望的样子：

Answer 1

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

一个禁用向下箭头图标：

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

一个禁用 search/list 下拉菜单：

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

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

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

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

<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-clear-wrapper {display: none;}

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

Answer 4

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

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

How to make ng-select remove-and-read-only