如何基于条件隐藏ng-select中的ng-option？[hidden]属性无效

开发者阿泽

2026-8-5

解决ng-select中ng-option无法通过[hidden]隐藏的问题

ng-select的ng-option组件不支持通过[hidden]属性隐藏选项，因为组件自身的样式逻辑会覆盖[hidden]的显示规则。你可以用以下两种方式实现需求：

1. 提前过滤数据源（推荐）

直接在组件里处理出符合显示条件的数组，模板里遍历这个过滤后的数组，不需要渲染的选项根本不会被加载，性能更优。

比如组件代码：

// 假设你的隐藏条件是：当name.isHidden为true时不显示该选项
filteredNames = this.names.filter(name => !name.isHidden);

模板代码修改为：

<ng-select [hideSelected]="true" [loading]="isLoading" [multiple]="true"
           [(ngModel)]="selectedIds" [closeOnSelect]="false"
           #selectedNames="ngModel" required
           placeholder="{{'Names' | translate}}" [clearable]="true">
    <ng-option *ngFor="let name of filteredNames" [value]="name.id">{{name.Label}}</ng-option>
</ng-select>

2. 用*ngIf控制选项渲染

如果需要保留原数组，只是在模板里控制显示，可以用*ngIf。注意不能在同一个ng-option上同时写*ngFor和*ngIf，需要用ng-container包裹：

<ng-select [hideSelected]="true" [loading]="isLoading" [multiple]="true"
           [(ngModel)]="selectedIds" [closeOnSelect]="false"
           #selectedNames="ngModel" required
           placeholder="{{'Names' | translate}}" [clearable]="true">
    <ng-container *ngFor="let name of names">
        <ng-option *ngIf="!name.isHidden" [value]="name.id">{{name.Label}}</ng-option>
    </ng-container>
</ng-select>