angular-mat-select 多选 实现按选择顺序排序

news2024/12/25 15:53:30

mat-select 正常情况下,多选后,已选项是按列表顺序进行排序,如果我想实现按照点击项目的顺序进行排序,我该如何做呢?

[参考网址](Angular order of selected option in multiple mat-select - Stack Overflow)

在这里插入图片描述

sortComparator是Angular Material中mat-select组件的一个属性,用于自定义多选下拉列表中选项的排序方式。当用户选择多个选项后,这些选项可能以不同的顺序显示在下拉列表中。使用sortComparator,我们可以提供一个自定义的比较函数,以决定选项在下拉列表中的显示顺序。

自定义函数返回值的解释:

0和正数:表示选择的选项将会按照点击的顺序-顺序排列

负数:表示选择的选项将会按照点击的顺序-倒序排列

select-multiple-example.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/840127.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

springboot第34集:ES 搜索,nginx

#用search after解决深分页性能问题 #第一页 GET /bank/_search {"size": 10,"sort": [{"account_number": {"order": "asc"}}] }#第二页 GET /bank/_search {"size": 10,"sort": [{"account_numb…

中国1km分辨率月最低温度数据集(1901-2021年)介绍

该数据为中国逐月最低温度数据,空间分辨率为0.0083333(约1km),时间为1901.1-2021.12。数据格式为NETCDF,即.nc格式。数据单位为0.1 ℃。该数据集是根据CRU发布的全球0.5气候数据集以及WorldClim发布的全球高分辨率气候…

数据安全治理的关键-数据分类分级工具

强大的资产发现能力 多种资产发现方式的组合应用,能够最大程度地提高资产发现能力。 灵活的敏感数据分类分级规则 内置丰富的敏感数据分类分级规则,支持正则表达式、关键词组、非结构化指纹、结构化指纹、机器聚类等多种匹配方式,并且规则…

vscode插件不能搜索安装

1 现象 vscode搜索自己的插件,报错: Error while fetching extensions. HXR failed2 原因 之前用vscode开发golang语言,设置了proxy代理,所以导致错误,删除即可 重启vscode 3 结果

基于Go编写一个可视化Navicat本地密码解析器

前提 开发小组在测试环境基于docker构建和迁移一个MySQL8.x实例,过程中大意没有记录对应的用户密码,然后发现某开发同事本地Navicat记录了根用户,于是搜索是否能够反解析Navicat中的密码掩码(这里可以基本断定Navicat对密码是采用…

IL汇编语言读取控制台输入和转换为整数

新建一个testcvt.il; .assembly extern mscorlib {}.assembly Test{.ver 1:0:1:0}.module test.exe.method static void main() cil managed{.maxstack 1.entrypointldstr "\n请输入一个数字:"call void [mscorlib]System.Console::Write(string)call st…

二分图笔记

什么是二分图? 二分图一般针对无向图问题 一张图中,如果能够把全部的点分到两个集合中,保证两个集合内部没有任何边 ,图中的边只存在于两个集合之间,即为二分图 判断二分图 1. 染色法 即用两种颜色对于这张图进行染…

Redis内网主从节点搭建

Redis内网主从节点搭建 1、文件上传2、服务安装3、服务启动4、配置主从复制 1、文件上传 内网环境手动上传gcc-c、redis.tar文件 2、服务安装 # 解压 unzip gcc-c.zip unzip gcc_rpm.zip tar -zxvf redis-6.2.13.tar.gz# 安装 cd gcc_rpm/ rpm -ivh *.rpm --nodeps --force…

LIME(可解释性分析方法)

目录 1.什么是LIME 2.思路 3.LIME在不同任务中的范式(待补充) 1.什么是LIME 简单理解: 对于分类任务:如下图所示,LIME可以列出分类结果,所依据特征对应给比重。 对于图像分类任务:如下图所示&a…

Python(六十八)元组的创建方式

❤️ 专栏简介:本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中,我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 :本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

JVM详情

JVM详情 一、JVM内存划分二、双亲委派模型(重点考察)三、 GC(垃圾回收机制)垃圾的判定算法垃圾回收算法 一、JVM内存划分 堆:存放new出来的对象;(成员变量) 方法区:存放…

【代码源每日一题div2 】简单的异或问题

简单的异或问题 - 题目 - Daimayuan Online Judge 题意: 思路: 首先这有一个结论:0~2^m-1的所有数进行XOR运算后,得到的结果是0。我们来证明一下这个结论: 比如m3时,一共是0 1 2 3 4 5 6 7,八…

炼钢工艺流程入门(1)

1. 工序简略词 BF(Blast Furnace):高炉 KR(Kambara Reactor):脱硫 BOF(Basic Oxygen Furnace):氧气顶吹转炉炼钢法 LF(Ladle Furnace):钢包精炼炉 CCM(Continuous Casting Machine) :连铸机 2. 软处罚约束与硬处…

【N32L40X】学习笔记13-软件IIC读写EEPROM AT24C02

AT24C02 8个字节每页,累计32个页 通讯频率MAX 400K AT24C02大小 2K 芯片地址 对于at24c02 A2A1A0 这三个引脚没有使用 写时序 由于设备在写周期中不会产生ACK恢复,因此这可用于确定周期何时完成(此特性可用于最大限度地提高总线吞吐量)…

Jmeter 压测工具使用手册[详细]

1. jemter 简介 jmeter 是 apache 公司基于 java 开发的一款开源压力测试工具,体积小,功能全,使用方便,是一个比较轻量级的测试工具,使用起来非常简 单。因为 jmeter 是 java 开发的,所以运行的时候必须先…

gitbook编译报错gitbook\gitbook-plugin-fontsettings\fontsettings.js‘

找到本地电脑gitbook安装的目录:cd ~/.gitbook/versions/版本/lib/output/website/ 可以用 vim copyPluginAssets.js 也可以用记事本打开注释掉或者改为false

Redis 双写一致性实践及案例

面试问题: 你只要用缓存,就可能会涉及到redis缓存与数据库双存储双写,你只要是双写,就一定会有数据一致性的问题,那么你如何解决一致性问题?双写一致性,你先动缓存redis还是数据库mysql哪一个&…

MySQL建表和增添改查

1.创建一个名为mydb的数据库 mysql> show database mydb; 查询 mysql> show database mydb; 2.创建一个学生信息表 mysql> create table mydb.student_informtion( -> student_id int UNSIGNED NOT NULL PRIMARY KEY, //非空(不允许为空&#xff0…

Axure RP9中使用Echarts示例

目录 在Axure中拖入一个矩形框,并命名tes 进入Echarts官网示例页面https://echarts.apache.org/examples/zh/index.html 选择自己需要的图表,修改数据,并复制左侧js代码 把上面复制的代码替换下方的option{}; javascript: var script docum…