如何移除PrimeNg下拉菜单中的预选

Question

我使用PrimeNg 15中的p-dropdown。这是一个非常简单的下拉菜单。

HTML:

<form [formGroup]="myReactiveForm">
...
<b>Dropdown:</b>
<p-dropdown
[options]="colors"
optionLabel="name"
formControlName="color" // <-----------Form control variable
></p-dropdown>
...
</form>

TS:

colors = [
{ name: 'black', code: 'blk' },
...
];
constructor() {
this.myReactiveForm = new FormGroup({
...
color: new FormControl(), // <----- kept this contructor blank
...
});
}
ngOnInit() {
this.clearForm();
}
clearForm() {
this.myReactiveForm.controls.color.setValue(null);
}

我仍然可以看到第一个项目，即"黑色"在下拉菜单中被选中。请帮忙。这是Stackblitz

Answer 1

需要将[autoDisplayFirst]绑定到p-dropdown

<p-dropdown
[options]="colors"
optionLabel="name"
[autoDisplayFirst]="false"
formControlName="color"
></p-dropdown>

文档说明了这个选项:

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