PrimeNg MultiSelect配置后点击下拉不显示数据问题求助

核心问题定位 #

• 缺失PrimeNG全局样式引入
  当前代码仅导入了MultiSelectModule模块，没有加载PrimeNG组件必须的核心样式、主题配套样式，这是新手使用PrimeNG最常遇到的渲染异常诱因——没有对应样式，下拉面板的布局计算会出错，哪怕options数组有有效值，选项也会因为样式规则缺失无法正常展示。
  这部分需要修改项目的angular.json配置，在build节点的styles数组中补充全局样式引入：

  "styles": [
    "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
    "node_modules/primeng/resources/primeng.min.css",
    "src/styles.css"
  ]
  

  注意：修改angular.json的配置后必须重启本地开发服务，这类配置变更无法通过热更新自动加载生效。如果使用的是PrimeNG v16以上的新版结构，把上述主题路径替换为对应版本的主题路径即可，核心要保证组件基础样式和主题样式被全局加载。

• 双向绑定值没有做初始化
  代码里的selectedCityCodes: string[]只声明了类型，没有赋初始空值。这种未初始化的引用类型值传给ngModel做绑定时，很容易触发组件内部的渲染逻辑报错，直接调整为带初始值的声明即可：

  selectedCityCodes: string[] = [];
  

• 可优化的代码细节
  将cities数组的赋值逻辑写在构造函数里可以正常运行，但更推荐直接在属性声明位置给初始值，减少构造函数里的冗余代码：

  cities: City[] = [
    { name: 'New York', code: 'NY' },
    { name: 'Rome', code: 'RM' },
    { name: 'London', code: 'LDN' },
    { name: 'Istanbul', code: 'IST' },
    { name: 'Paris', code: 'PRS' }
  ];
  

内容的提问来源于stack exchange，提问作者Ali.Rashidi