primeng - 一次只选择一个复选框项

Question

是否可以将primeng＆＃39; checkbox module配置为选择框，例如用户一次只能选择一个复选框吗？

我的组件：

<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-checkbox name="group1" value="New York" label="New York" [(ngModel)]="selectedCities" inputId="ny"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group1" value="San Francisco" label="San Francisco" [(ngModel)]="selectedCities" inputId="sf"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group1" value="Los Angeles" label="Los Angeles" [(ngModel)]="selectedCities" inputId="la"></p-checkbox></div>
</div>

使用stackblitz example。

Answer 1

我建议，如果你想要一个行为类似于selectbox的组件，请使用primeng＆＃39; s RadioButton组件。另一方面，您也可以更改chceckbox的行为：

• 您需要在每个复选框组件上使用onChange()事件 知道用户点击您的复选框时。
• 用户单击复选框后，您需要存储当前元素。在你的情况下，它是const latestCity = this.selectedCities[this.selectedCities.length - 1];。由于复选框项目作为字符串值存储在数组中，因此当前所选项目是该数组的最后一个元素。

• 最后，您需要清空数组并将最后选择的项目推送到该空数组中：

  this.selectedCities.length = 0;

  this.selectedCities.push(latestCity);

已编辑stackblitz。