如何使 ng-select 删除和只读

Question

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

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

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

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

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

原文由 Francesco Borzi 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
}

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

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

原文由 Francesco Borzi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Nadeeshan Herath 发布，翻译遵循 CC BY-SA 4.0 许可协议