如何在 ng-select 的 ng-options 中删除（显示：无）禁用的选项？答案

【问题标题】：How to remove(display : none) disabled options in ng-options of ng-select?如何在 ng-select 的 ng-options 中删除（显示：无）禁用的选项？
【发布时间】：2021-01-15 08:53:55
【问题描述】：

我不想在下拉列表中显示已启用属性设置为 false 的值。

<ng-select placeholder="Select" *ngIf="test.test.type == 'test1'">
        <ng-option *ngFor="let testValue of test.values"
        [value]="testValue"  [disabled]="testValue.enabled === false" >{{testValue.value}}</ng-option>
    </ng-select>

上面的代码禁用了属性 enable 设置为 false 的值。如何过滤选项以便从下拉列表中完全删除禁用的选项而不删除数组项。

提前致谢。

【问题讨论】：

标签： angular angularjs-directive ng-options angular-ngselect

【解决方案1】：

您可以使用 CSS。下面的代码将帮助您在下拉列表中添加隐藏类，您可以根据提供的 expr 隐藏值，这些值必须被评估为真。

<ng-select placeholder="Select" *ngIf="test.test.type == 'test1'">
        <ng-option *ngFor="let testValue of test.values"
        [value]="testValue"  [disabled]="testValue.enabled === false" [class.hidden]="Write an expr for which you need to hide" >{{testValue.value}}</ng-option>
    </ng-select>

在你的组件 css 中：

.hidden {
    visibility: hidden;
}

【讨论】：

你也可以使用[style.visibility]="condition?'hidden':null"

【解决方案2】：

以下代码有效

.ng-select.custom-class .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled {
    display: none !important;
}

【讨论】：

我建议您创建自己的自定义类并应用 css，因为这些类可以是动态的。