是否可以配置Primeng的复选框模块以表现为Selectbox,例如用户一次只能选择一个复选框?
我的组件:
<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示例。
我建议,如果您想要像Selectbox这样的组件,请使用Primeng的RadioButton组件。另一方面,您也可以更改chceckbox的行为:
- 您需要在每个复选框组件上使用
onChange()
事件知道用户何时单击您的复选框。 - 用户单击到复选框后,您需要存储当前元素。在您的情况下,是
const latestCity = this.selectedCities[this.selectedCities.length - 1];
。由于复选框项目存储在数组中,因此当前选定的项目是该数组的最后一个元素。 -
最后,您需要清空数组,然后将最后一个选定的项目推入该空数组:
this.selectedCities.length = 0;
this.selectedCities.push(latestCity);
编辑的Stackblitz。