如何移除ng-select的空选项？单选项时自动选中并禁用下拉

Got it, let's work through this problem to get your ng-select behaving exactly how you want it. Here's a clean, performant approach to meet all your requirements:

Step 1: Preprocess Your Data in the Component #

First, we'll clean up your validFiltersData to remove empty options and set up the auto-select/disable logic right in your component class. This avoids repeating filter logic in the template (which can hurt performance with large datasets).

Add this code after you fetch or initialize validFiltersData:

this.validFiltersData.forEach(filter => {
  // Filter out any options with empty/whitespace-only Text
  filter.filteredValues = filter.Values?.filter(item => {
    return item.Text && item.Text.trim() !== '';
  }) || [];

  // If only one valid option exists: auto-select it and mark the dropdown as disabled
  if (filter.filteredValues.length === 1) {
    filter.selectedValue = filter.filteredValues[0];
    filter.isDropdownDisabled = true;
  } else {
    filter.isDropdownDisabled = false;
  }
});

Step 2: Update the Template #

Now modify your ng-select template to use our preprocessed data and bindings:

<ng-container *ngFor="let validFilter of validFiltersData; let i = index">
  <!-- Only render the filter if we have valid, non-empty options -->
  <div *ngIf="validFilter.filteredValues.length > 0" class="filter col-md-4 reportFilter">
    <ng-select 
      [items]="validFilter.filteredValues" 
      bindLabel="Text" 
      [(ngModel)]="validFilter.selectedValue" 
      [ngClass]="{'input-md': true, 'ng-invalid': !validFilter.IsValid }"
      [disabled]="validFilter.isDropdownDisabled"
    >
    </ng-select>
  </div>
</ng-container>

What This Does: #

• Removes empty options: The filteredValues array excludes any items where Text is empty or just whitespace, so users never see empty options in the dropdown.
• Auto-selects the only option: When filteredValues has exactly one item, we automatically assign it to selectedValue so the user doesn't have to select it manually.
• Disables the dropdown: The [disabled] binding locks the dropdown when there's only one option, preventing users from making unnecessary or invalid changes.

Alternative: Template-Only Approach (If You Prefer) #

If you don't want to modify the component class, you can handle everything directly in the template (note: this repeats the filter logic, which isn't ideal for large datasets):

<ng-container *ngFor="let validFilter of validFiltersData; let i = index">
  <div 
    *ngIf="validFilter.Values?.filter(item => item.Text?.trim() !== '').length > 0" 
    class="filter col-md-4 reportFilter"
  >
    <ng-select 
      [items]="validFilter.Values.filter(item => item.Text?.trim() !== '')" 
      bindLabel="Text" 
      [(ngModel)]="validFilter.selectedValue" 
      [ngClass]="{'input-md': true, 'ng-invalid': !validFilter.IsValid }"
      [disabled]="validFilter.Values.filter(item => item.Text?.trim() !== '').length === 1"
      <!-- Auto-select the only option when the component initializes -->
      (ngOnInit)="validFilter.Values.filter(item => item.Text?.trim() !== '').length === 1 ? validFilter.selectedValue = validFilter.Values.filter(item => item.Text?.trim() !== '')[0] : null"
    >
    </ng-select>
  </div>
</ng-container>

内容的提问来源于stack exchange，提问作者Guy E