PrimeNG下拉框仅含一项时自动选中并禁用，隐藏占位符

1. 模板修改（动态绑定属性） #

调整p-dropdown的属性，根据filteredGroupNames的长度动态控制禁用状态、占位符和清除按钮显示：

<ng-template pTemplate="content">
    <div class="field">
      <label>Name</label>
      <p-dropdown 
        [(ngModel)]="newOrSelectedGroupName" 
        [options]="filteredGroupNames" 
        [showClear]="filteredGroupNames.length > 1"
        [disabled]="filteredGroupNames.length === 1"
        [placeholder]="filteredGroupNames.length !== 1 ? 'Select a group' : ''"
      ></p-dropdown>
    </div>
</ng-template>

2. 组件类逻辑（自动选中第一项） #

在组件的TypeScript代码中，根据filteredGroupNames的加载/变化情况，自动为绑定的变量赋值：

场景1：filteredGroupNames是父组件传入的输入属性

import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnChanges {
  @Input() filteredGroupNames: any[] = [];
  newOrSelectedGroupName: any;

  ngOnChanges(changes: SimpleChanges): void {
    const groupChange = changes['filteredGroupNames'];
    if (groupChange && groupChange.currentValue) {
      const groups = groupChange.currentValue;
      if (groups.length === 1) {
        // 若options是{ label: string, value: any }结构，取value赋值
        this.newOrSelectedGroupName = groups[0].value;
        // 若options是纯字符串数组，直接赋值：this.newOrSelectedGroupName = groups[0];
      }
    }
  }
}

场景2：filteredGroupNames是组件内部加载的数据

import { Component } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  filteredGroupNames: any[] = [];
  newOrSelectedGroupName: any;

  loadGroups(): void {
    // 模拟数据获取（比如HTTP请求）
    this.filteredGroupNames = this.fetchGroupData();
    
    if (this.filteredGroupNames.length === 1) {
      this.newOrSelectedGroupName = this.filteredGroupNames[0].value;
      // 纯字符串数组则用：this.newOrSelectedGroupName = this.filteredGroupNames[0];
    }
  }

  private fetchGroupData(): any[] {
    // 返回你的分组数据
    return [{ label: '唯一分组', value: 'group1' }];
  }
}

关键说明 #

• [disabled]：数组长度为1时禁用下拉框，避免用户误操作
• [placeholder]：仅当数组元素多于1个时显示占位文本，否则为空不显示
• [showClear]：仅当元素数量大于1时保留清除按钮，禁用状态下无需该功能
• 自动选中逻辑：通过监听数据变化或数据加载完成事件，直接为ngModel绑定变量赋值，确保下拉框默认选中唯一选项

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