PrimeNG DropDown使用translate翻译时刷新页面placeholder失效问题

问题根因 #

这个问题是两个因素共同导致的：

1. ngx-translate的翻译资源是异步加载的，页面刷新瞬间翻译还没返回，此时{{ 'LABEL' | translate }}的返回值为空或者原始的LABEL字符串。PrimeNG Dropdown默认开启了autoDisplayFirst特性，当检测到placeholder为空时，会自动选中第一个选项填充下拉框。
2. 直接在业务代码的ngOnInit中同步调用翻译方法时，翻译资源还未加载完成，只能拿到未翻译的标签key，不会返回最终翻译内容。

解决方案 #

你可以任选以下一种方案修复：

方案1：直接关闭自动选中首选项的特性（最简） #

给Dropdown组件加[autoDisplayFirst]="false"属性，直接禁用默认选中第一个选项的逻辑，原有翻译管道写法不用改：

<p-dropdown 
  [options]="myOptions" 
  [(ngModel)]="option" 
  placeholder="{{ 'LABEL' | translate }}" 
  optionLabel="name"
  [autoDisplayFirst]="false"
></p-dropdown>

注意要确保你的option变量初始值为null或undefined，不要赋值为空字符串，否则会导致placeholder不展示。

// TS变量声明要初始化null
option: string | null = null;

方案2：异步绑定翻译值避免空占位 #

如果不想修改默认选中逻辑，可以把placeholder绑定为翻译的异步流，等翻译加载完成后再赋值给属性：

// TS代码
import { TranslateService } from '@ngx-translate/core';

export class YourComponent {
  myOptions: MyOptions[];
  option: string | null = null;
  placeholder$ = this.translate.get('LABEL');

  constructor(private translate: TranslateService) {}

  ngOnInit(): void { 
    this.myOptions = [
      { name: 'options1' },
      { name: 'option2' },
      { name: 'option3' }
    ];
  }
}

<!-- HTML代码 -->
<p-dropdown 
  [options]="myOptions" 
  [(ngModel)]="option" 
  [placeholder]="placeholder$ | async" 
  optionLabel="name"
></p-dropdown>

方案3：业务代码中监听翻译完成事件后赋值 #

如果需要把翻译结果存在变量中使用，要订阅翻译的异步返回，不要同步取值：

// TS代码
export class YourComponent {
  myOptions: MyOptions[];
  option: string | null = null;
  placeholder: string = '';

  constructor(private translate: TranslateService) {}

  ngOnInit(): void { 
    this.myOptions = [
      { name: 'options1' },
      { name: 'option2' },
      { name: 'option3' }
    ];
    // 等待翻译加载完成后再赋值
    this.translate.get('LABEL').subscribe(transText => {
      this.placeholder = transText;
    })
  }
}

<!-- HTML代码 -->
<p-dropdown 
  [options]="myOptions" 
  [(ngModel)]="option" 
  [placeholder]="placeholder" 
  optionLabel="name"
></p-dropdown>

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