如何将输入值映射到PrimeNG p-dropdown选项，无匹配时显示默认项

组件逻辑修改 #

在组件中实现ngOnChanges钩子，监听输入的city变量变化，同步处理下拉选项与选中值的逻辑：

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

export enum CityEnum{
   LON = "London",
   PAR = "Paris",
   VIE = "Vienna"
}

@Component({
  // 补充组件元数据（如selector、templateUrl等）
})
export class Citys implements OnChanges{
     @Input() city: string;
     cityOptions: string[] = Object.values(CityEnum);
     chosenCity: string;

     ngOnChanges(changes: SimpleChanges): void {
        if (changes['city']) {
          const inputCity = changes['city'].currentValue;
          
          // 场景1：输入为空字符串，重置选中值以显示占位符
          if (inputCity === '') {
            this.chosenCity = '';
            return;
          }

          // 场景2：输入有值，先标记为选中项
          this.chosenCity = inputCity;

          // 若输入值不在枚举选项中且未重复，则添加到选项列表
          if (!this.cityOptions.includes(inputCity)) {
            this.cityOptions = [...this.cityOptions, inputCity];
          }
        }
     }
}

模板调整 #

补全p-dropdown闭合标签，并添加optionLabel属性适配字符串数组选项：

<div>
   <p-dropdown 
     [options]="cityOptions" 
     [(ngModel)]="chosenCity" 
     placeholder="Select a City"
     optionLabel="."
   ></p-dropdown>
</div>

关键说明 #

• 用ngOnChanges监听输入变量变化，确保city更新时自动触发逻辑
• 通过includes判断选项是否存在，避免重复添加自定义城市
• 输入为空时将chosenCity设为空，下拉框会自动显示占位符文本
• optionLabel="."用于指定直接使用数组中的字符串元素作为显示内容

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