Angular5+PrimeNG p-dropdown未显示选中值问题求助

嘿，我之前在使用PrimeNG dropdown的时候也踩过类似的坑，特别是异步加载选项的场景，给你几个亲测有效的解决思路：

• 优先加载Options数组，再赋值NgModel
  问题的核心是当你的consignment.contract已经有值时，contractOptions还是空的，PrimeDropdown此时没法找到匹配的选项。所以一定要确保先拿到选项数据，再给绑定的字段赋值。比如从接口获取选项的话，可以这么写：

  // 先请求合同选项列表
  this.contractApi.getContracts().subscribe(contracts => {
    this.contractOptions = contracts;
    // 等选项加载完成后，再设置ngModel绑定的字段
    this.consignment.contract = this.preloadedContractValue;
  });
  

  如果你的consignment是页面初始化就拿到的，那可以在选项加载后，手动把consignment.contract和contractOptions里的项做匹配，确保引用或者标识一致。

• 处理对象类型选项的匹配问题
  如果你的选项是对象数组，PrimeNG默认是通过对象引用来匹配选中值的。如果consignment.contract和contractOptions里的对象不是同一个引用，就算属性都一样也不会显示选中状态。这时候可以用optionValue指定匹配的唯一标识字段，比如合同ID：

  <p-dropdown 
    [options]="contractOptions" 
    [(ngModel)]="consignment.contract"
    optionLabel="contractName" <!-- 显示的文本字段 -->
    optionValue="contractId"> <!-- 用来匹配的唯一标识 -->
  </p-dropdown>
  

  这样只要consignment.contract.contractId和选项里的contractId一致，就能正确显示选中值，不用管对象引用是否相同。

• 手动触发变更检测（必要时）
  有时候异步加载完成后，Angular的变更检测可能没及时触发，导致dropdown没更新。这时候可以注入ChangeDetectorRef来手动触发：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  this.contractApi.getContracts().subscribe(contracts => {
    this.contractOptions = contracts;
    this.cdr.detectChanges(); // 强制Angular更新视图
  });
  

• 初始化Options数组为非空值
  尽量不要让contractOptions一开始是undefined，可以初始化为空数组：

  contractOptions: Contract[] = [];
  

  这样dropdown在加载过程中不会因为选项为空出现异常，等数据到了再更新数组即可。

内容的提问来源于stack exchange，提问作者Artem P.