如何使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;
}

然后，我们使用创建的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>