[英]How to select only one div at a time in angular 10
I have to create a sort filter in my application where I can select only one option at a time to sort my results.我必须在我的应用程序中创建一个排序过滤器,我可以 select 一次只有一个选项来对我的结果进行排序。 My UI is such that I can not use checkboxes.我的 UI 无法使用复选框。 It is simple list.这是一个简单的列表。 So I am creating the list through div.所以我正在通过 div 创建列表。 Can anyone suggest how to imple任何人都可以建议如何实施 ment selection and deselection of div in angular. angular 中 div 的选择和取消选择。 I can select only one div at a time.我一次只能 select 一个 div。 Also If I have selected any option and now i click on option 2 then option 1 div should get de-selected and option 2 div should get selected.此外,如果我选择了任何选项,现在我点击选项 2,那么选项 1 div 应该被取消选择,选项 2 div 应该被选中。
One solution would be to set the 'current' value when the div is clicked.一种解决方案是在单击 div 时设置“当前”值。 Add a class when the 'current' value matches the item's value.当“当前”值与项目值匹配时,添加 class。
<div *ngFor="let item of items"
(click)="onItemSelection(item)
[class.current-selection]="item === currentValue">
{{ item }}
</div>
Handle the event in your component.ts file by storing the new value:通过存储新值来处理 component.ts 文件中的事件:
currentValue: string;
onItemSelection(newValue: string) {
this.currentValue = newValue;
}
Then update the look of the current item in your component.scss file:然后更新 component.scss 文件中当前项目的外观:
.current-selection {
background-color: green;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.