如何在p下拉列表中设置默认值

Question

下面的p下拉列表正在从API读取json数据。在这些数据值中；苹果；默认情况下。目前，在p下拉列表中，用户首先可以看到的是占位符值(即"选择产品"(。

如何在p下拉列表中预设默认值？有什么帮助或建议吗？

<p-dropdown
[options]="products"
optionLabel="productName"
optionValue="productId"
placeholder="Select a Product"
[filter]="true"
filterBy="productName"
></p-dropdown>

[
{
productName: "apple",
productId: 1
},
{
productName: "banana",
productId: 2
},
{
productName: "watermelon",
productId: 3
},
]

Answer 1

您可以使用ngModel将当前的selectedItem与dropdown所选项目相关联，反之亦然。

<p-dropdown
[options]="products"
optionLabel="productName"
optionValue="productId"
placeholder="Select a Product"
[filter]="true"
filterBy="productName"
[(ngModel)]="selectedProduct" // Add this line
></p-dropdown>

重要的是，你必须将该属性添加到你的Angular组件中，以便能够使用它

编辑：以下是您的组件示例：

interface Product {
productId: number;
productName: string;
}
@Component({
...
})
export class DropdownDemo {
public products: Product[] = [
{
productName: 'apple',
productId: 1,
},
{
productName: 'banana',
productId: 2,
},
{
productName: 'watermelon',
productId: 3,
},
];
public selectedProduct: Product; // This is what you'd use for your [(ngModel)]
}

如果有帮助，请告诉我！