码迷,mamicode.com
首页 > 其他好文 > 详细

Angualr 内置工具-SelectionModel

时间:2020-05-18 19:03:02      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:clear   box   col   LEDE   port   select   nbsp   输出   led   

SelectionModel: 被用来控制选中一个和多个item时候的逻辑。例如下拉菜单,复选框选中等,非常方便。

引入:import{SelectionModel}from‘@angular/cdk/collections‘;

声明:private checkSelection = new SelectionModel<string>(true, []); // 一个选中的集合,可以很方便处理选中和非选中,甚至用来判断全选的状态。

内置方法

select(value) 选中一个值到集合里面

deselect(value) 取消选中

toggle(value) 选中和非选中之间切换

clear() 清除所有选中的值

isSelected(value) 判断是否选中,并返回一个boolean值

hasValue() 判断selectModel是否有值

sort(function) 根据一个方法进行排序

除此之外,还有监测选中的方法,SelectionChange(),同SelectionModel一样需要事先引入。

 
/* 假如我有一个checkbox组件, * checked:输入属性,判断是否选中 * change: 代表事件输出,Event emit * 简单使用方法如下 */
<checkbox-component [checked]="checkSelection.isSelected(id)" (change)="checkSelection.toggle(id)"></checkbox-component>

 

 
 

Angualr 内置工具-SelectionModel

标签:clear   box   col   LEDE   port   select   nbsp   输出   led   

原文地址:https://www.cnblogs.com/yinghuochongfighter/p/12912048.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!