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一样需要事先引入。

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

Angualr 内置工具-SelectionModel的更多相关文章

  1. 图文解说PhpStorm 7.0版本新增内置工具

    很多PHP开发者,都比较关心PhpStorm 7.0版本的内置工具.今天我们将测试内置的Vagrant工具和SSH远端控制台工具. Vagrant工具集成在PhpStorm 7.0版本中,提高了IDE ...

  2. 利用Windows内置工具winsat测试硬盘速度(SSD&机械盘对比)

    利用Windows内置工具winsat测试硬盘速度(SSD&机械盘对比) 以下是红色内容是在命令行运行: C:\Users\Administrator>winsat diskWindow ...

  3. JDK内置工具命令

    javap Java反编译工具,主要用于根据Java字节码文件反汇编为Java源代码文件用法:javap 用法 描述 javap -help —help -? 输出此用法消息 javap -versi ...

  4. JDK内置工具之一——JMap(java memory map)

    1.介绍 打印出某个java进程(使用pid)内存内的,所有‘对象’的情况(如:产生那些对象,及其数量). 可以输出所有内存中对象的工具,甚至可以将VM 中的heap,以二进制输出成文本.使用方法 j ...

  5. 线上问题排查(2)——JDK内置工具

    https://www.cnblogs.com/keanuyaoo/p/3253663.html 常用命令目录: jps命令(Java Virtual Machine Process Status T ...

  6. kali 中的内置工具

    askDing Life is short,use python 博客园 | 首页 | 新随笔 | 新文章 | 联系 | 订阅 | 管理 随笔: 326 文章: 5 评论: 4 引用: 0 kali菜 ...

  7. SpringBoot内置工具类,告别瞎写工具类了

    不知大家有没有注意到,接手的项目中存在多个重复的工具类,发现其中很多功能,Spring 自带的都有.于是整理了本文,希望能够帮助到大家! 一.断言 断言是一个逻辑判断,用于检查不应该发生的情况 Ass ...

  8. JDK内置工具使用(jps、jstack、jmap、jstat)

    一.JPS 1.jps -lvm:用于查看当前机器上已装载的jvm 二.jstackjstack命令主要用来查看Java线程的调用堆栈的,可以用来分析线程问题(如死锁) 1.jstack -l pid ...

  9. JDK内置工具jstack(Java Stack Trace)(转)

    1.介绍 jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项"-J-d64",Windows的js ...

随机推荐

  1. 理解Go协程与并发(转)

    理解Go协程与并发   协程 Go语言里创建一个协程很简单,使用go关键字就可以让一个普通方法协程化: Copy package main import ( "fmt" " ...

  2. linux(centos8):kubernetes安装的准备工作

    一,安装docker-ce19.03.11 1,卸载podman [root@kubemaster ~]# dnf remove podman podman是红帽系os自带的容器,卸载是为了避免冲突 ...

  3. centos6.8 Mysql-5.7.20 升级 mysql-8.0.14-1

    Mysql-5.7.20 升级 mysql-8.0.14-1   操作前建议先查阅以下网页初步了解Mysql版本升级信息  https://blog.csdn.net/u012946310/artic ...

  4. MSF权限维持

    MSF权限维持 环境搭建 目标机:win7 ip:192.168.224.133 攻击机:kali linux ip:192.168.224.129 首先使用web_delivery模块的regsvr ...

  5. WCF服务创建到发布(SqlServer版)

    在本示例开始之前,让我们先来了解一下什么是wcf? wcf有哪些特点? wcf是一个面向服务编程的综合分层架构.该架构的项层为服务模型层. 使用户用最少的时间和精力建立自己的软件产品和外界通信的模型. ...

  6. 解决Java连接Oracle 12c存在的问题

    感谢作者 原文链接:https://blog.csdn.net/peng_wei_kang/article/details/80403486 1.发现项目报以下错误:   Caused by: jav ...

  7. Vue 路由切换时页面内容刷新页面并更新数据

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...

  8. 如何在 vue 项目里正确地引用 jquery

    转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 / ...

  9. 查询时间段内所有日期(限foton)

    String dataStr = "2019-04"; try { Date date = DateUtils.parseDate(dataStr); Date startTime ...

  10. src/plugins/Export2Excel.js(目录没有可以重建)

    第一步Install cnpm install file-saver 或者 yarn add file-saver cnpm install xlsx 或者 yarn add xlsx cnpm in ...