使用 p-selectbutton 动态设置值

p-selectbutton 是 PrimeNG 中的一个组件，用于提供一个可选择的按钮列表并支持单选和多选功能。本文将介绍如何动态设置 p-selectbutton 的初始值，使其适应不同的场景和需要。

基本用法

首先，我们来看一下 p-selectbutton 的基本用法。以下是它的 HTML 模板代码：

<p-selectbutton [options]="options"></p-selectbutton>

其中 options 是一个数组，包含可供选择的按钮列表。你可以像下面这样在组件的 TypeScript 代码中定义它：

options = [
  { label: 'First', value: 1 },
  { label: 'Second', value: 2 },
  { label: 'Third', value: 3 },
];

其中每个按钮对象包括 label 和 value 两个属性，分别表示按钮的文本和值。

如果你不需要多选功能，你可以使用 ngModel 来绑定选择的值，如下所示：

<p-selectbutton [options]="options" [(ngModel)]="selectedValue"></p-selectbutton>

这里的 selectedValue 就是当前选中的按钮对应的值。你可以在组件的 TypeScript 代码中定义它：

selectedValue: number;

动态设置值

现在假设你需要在 p-selectbutton 中动态设置初始值。这种情况下，你可以使用 ngModel 和 ngModelChange 两个属性来实现。以下是修改后的 HTML 模板代码：

<p-selectbutton [options]="options" [ngModel]="selectedValue" (ngModelChange)="onChange($event)"></p-selectbutton>

这里的 selectedValue 仍然是你想要设置的初始值，但是它不再是双向绑定的，而是只读的。onChange 是一个在选中值改变时被调用的函数，你可以在组件的 TypeScript 代码中定义它：

onChange(selectedValues: any[]) {
    this.selectedValue = selectedValues[0];
}

这里的 selectedValues 是一个数组，包含当前选中的所有按钮对应的值。因为 p-selectbutton 本身只支持单选和多选两种模式，所以这个数组的长度可能为 0、1 或多个。

在 onChange 函数中，我们直接将第一个选中值赋给了 selectedValue。如果你期望多选情况，那么你需要根据具体需求做出适当修改。

以上是动态设置 p-selectbutton 值的介绍，希望对你有所帮助！