PrimeNG DropDown 占位符在刷新时无法使用翻译

Question

我有一个 PrimeNG 下拉控件，它带有一个使用翻译管道的占位符。当我最初加载视图时，占位符按预期显示。但是，当我刷新页面时，下拉列表始终显示选择了第一个选项的下拉列表。我试图将翻译移动到代码中并通过数据绑定使用变量，但在这种情况下，占位符将仅显示翻译标签。唯一可行的是不使用任何翻译。在这种情况下，即使在页面刷新后也会显示占位符。

HTML：

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

角度：

myOptions: MyOptions[];
option: string;

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

Answer 1

尝试将

autoDisplayFirst

选项设置为

false

，以防止这种行为，因为下拉列表可能在获得正确的翻译之前被初始化。

autoDisplayFirst：

如果没有定义占位符且值为空，是否将第一项显示为标签。

Answer 2

<p-dropdown [class]="'yourstyle'" [options]="yourlist" [(ngModel)]="selecteditem"></p-dropdown>

我的 CSS 类：

.yourstyle {
width: 100% !important;
background-color: greenyellow;
}

如果上面没有工作

<p-dropdown [options]="yourlist" [(ngModel)]="selecteditem" placeholder="Select a City" [showClear]="true" styleClass="yourstyle">