ng-select 中 [clearable] 的替代方法是什么答案

【问题标题】：What is the alternative of [clearable] in ng-selectng-select 中 [clearable] 的替代方法是什么
【发布时间】：2021-01-29 02:54:37
【问题描述】：

我不想使用ng-select 中的[clearable] 来泄露我的空间。而不是[clearable]，我只想使用[clearOnBackspace]，但是当我写[clearable] = "false"和[clearOnBackspace] = "true"时它不起作用。

enter code here

    <ng-select [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity"
               [clearable]="false"
               [clearOnBackspace] = "true"
               [excludeGroupsFromDefaultSelection] = "true">
    </ng-select>

【问题讨论】：

如果 'clearable' 属性设置为 false，并且 clearOnBackspace 设置为 true，用户可以使用退格按钮删除单个项目。 if (this.filterValue || (!multiple && !this.clearable) || !this.clearOnBackspace || !this.hasValue) { 模板示例： (add)=... (remove)=. .. [multiple]="true" [clearable]="false" [clearOnBackspace]="true" 你可以简单地通过css隐藏清除按钮
使用 [clearable]="true" 只会在退格键上被清除
用户只选择了一个值。所以 [multiple]="true" 不需要。是的，我可以使用 CSS 删除十字按钮，但我想通过 JavaScript 处理它。
@Just Code 如果我设置 [clearable]="true" 它还会显示十字图标。由于空间不足，我不允许这样做。

标签： javascript angular7 angular-ngselect

【解决方案1】：

如果您执行[clearable]="false"，它将不允许清除选择。

您可以使用 css 隐藏关闭图标。像这样

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

并保持 ng-select 原样

Demo

<ng-select [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity"
               [clearable]="true"
               [clearOnBackspace] = "true"
               [excludeGroupsFromDefaultSelection] = "true">

事实上你不需要[clearOnBackspace] = "true"

【讨论】：

@Sabbir 为什么不用css？