gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 18:18:58 25 4
gpt4 key购买 nike

是否可以配置 primeng 的 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 .

最佳答案

我建议,如果您想要一个行为类似于选择框的组件,请使用 primeng 的 RadioButton成分。另一方面,您也可以更改 chceckbox 的行为:

  • 您需要在每个复选框组件上使用 onChange() 事件来知道用户何时点击您的复选框。
  • 用户点击复选框后,您需要存储当前元素。在您的例子中,它是 const latestCity = this.selectedCities[this.selectedCities.length - 1];。由于复选框项作为字符串值存储在数组中,因此当前选中的项是该数组的最后一个元素。
  • 最后您需要清空数组并将最后选择的项目插入该空数组:

    this.selectedCities.length = 0;

    this.selectedCities.push(latestCity);

已编辑 stackblitz .

关于angular - primeng - 一次只选择一个复选框项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49597683/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com