首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何取消选中当我使用Material Angular选中另一个mat- using toggle时取消选中mat-slide toggle

取消选中mat-slide toggle可以使用两种方法:

  1. 使用[(ngModel)]绑定属性:通过在mat-slide-toggle上使用[(ngModel)]指令,将其绑定到一个布尔类型的变量。当mat-slide-toggle的状态改变时,该变量的值也会随之改变。因此,你可以在另一个mat-slide-toggle的状态改变事件中,将该变量的值设为false,以取消选中第一个mat-slide-toggle。

示例代码:

代码语言:txt
复制
<mat-slide-toggle [(ngModel)]="toggle1Value">Toggle 1</mat-slide-toggle>
<mat-slide-toggle (change)="toggle2Change($event)">Toggle 2</mat-slide-toggle>
代码语言:txt
复制
toggle1Value: boolean = true;

toggle2Change(event: MatSlideToggleChange) {
  if (event.checked) {
    this.toggle1Value = false; // 取消选中Toggle 1
  }
}
  1. 使用matSlideChange事件:使用matSlideChange事件来监听mat-slide-toggle的状态改变,并在事件处理函数中取消选中另一个mat-slide-toggle。你可以使用ViewChild来获取对应的mat-slide-toggle元素,然后通过调用其toggle()方法来取消选中。

示例代码:

代码语言:txt
复制
<mat-slide-toggle (change)="toggle1Change($event)">Toggle 1</mat-slide-toggle>
<mat-slide-toggle #toggle2 (change)="toggle2Change($event)">Toggle 2</mat-slide-toggle>
代码语言:txt
复制
import { MatSlideToggle } from '@angular/material/slide-toggle';
import { ViewChild } from '@angular/core';

@ViewChild('toggle2') toggle2: MatSlideToggle;

toggle1Change(event: MatSlideToggleChange) {
  if (event.checked) {
    this.toggle2.toggle(); // 取消选中Toggle 2
  }
}

toggle2Change(event: MatSlideToggleChange) {
  // do something
}

以上是取消选中mat-slide-toggle的两种方法。希望对你有帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Unity-UI(UGUI详解)02.2 Interaction组件、Auto Layout

    : 确认决定 GUI中是否打开子菜单 取消行为 Toggle Toggle允许用户切换状态在On和Off之间 ?...,这样在组中同时只能有一个Toggle是被选中的状态 当用户改变当前的值的时候,Toggle触发事件OnValueChanged Toggle使用场景: 切换选择 让用户确认他们已经阅读了法律免责声明...,这样在组中同时只能有一个Toggle是被选中的状态 Property: Allow Switch Off:允许Toggle被关闭状态。...此选项选中Toggle就可以被取消勾选 Slider: Slider Control允许玩家选择可调整的数值在一个区间范围内,这个组件和ScrollBar比较相似。 ?...当我们需要在较小的空间展示较多的内容的时候,Scroll Rect提供了对内容的滑动。

    2.1K20

    零基础入门 17: UGUI Toggle

    Group是当前Toggle所属的组。不同的Toggle可以在一个分组内使用。 知道这些以后,重新回头看看第一个游戏内的效果图。 ? 音乐音效等开关就是单独的Toggle使用。...下面的画质选择,就是让三个Toggle在一个Group组内。当其中一个选中后,会自动清除同组内其他Toggle的标记。 下面来看一下,如何增加Toggle的Group。...在知道如何编辑器下控制Toggle以后,接下来就到了脚本获取Toggle切换事件的获取了。...可想而知,我们从一个Toggle,切换成另外一个Toggle,或者单独的一个Toggle来回切换,我们如何通过代码得知这个事件?...通过State来作状态区分,state为True代表Toggle选中,否则被取消。 然后我们在这里增加些日志输出。 ? 然后我们回到Unity来查看下运行效果。 ?

    1.9K50

    Unity3d开发

    JavaScript也可以使用C#语言进行编写脚本 JavaScript之前已经又所了解,但是在之前也只是在网页的基础上进行学习在网页上如何使用JavaScript脚本进行编译 js学习 | 毛豆人很逗...7、OnGUI() 绘制游戏界面的函数,因为每一帧都要执行多次,所以一些时间相关的函数要尽量避免直接在该函数内部使用 8、OnCollisionEnter() 当一个游戏对象与另外的游戏对象碰撞执行这个函数...中系统自带的基本游戏对象 使用C#脚本在unity3D中创建一个Cube模型和一个Sphere模型,通过屏幕上方的按钮控制Cube模型和Sphere模型的创建 创建脚本输入代码 using System.Collections...On Hover 停留状态,用于选择框控件选中后文字的显示 On Active 激活状态,用于选择框控件选中时文字显示 On Focused 获得焦点状态 Border 处理边界,他不会影响在按钮平面显示的宽高...toggle单选 创建一个空物体添加Add Component添加Toggle Group; 创建多个toggle将刚才创建的Toggle Group放入toggle group;之后将刚才创建的toggle

    9.1K30

    JQuery-命令速查-CheatSheet

    Checkbox 勾选所有 Checkbox 得到 checkbox 的值 选中某 Checkbox 的同时取消选择其他所有 jQuery: Uncheck other checkbox on...one checked 判断是否被选中 Toggle for editable of inputs 获取 Iframe 里面的元素 和 Jquery 操作 CSS&style 表单 JQuery...('viewDept').checked JQuery: $('id').is(':checked') 注意这里使用了伪类 ---- Toggle for editable of inputs $('....on() bind 事件,使用.unBind() 取消 bind 事件 注意事件不会被覆盖,因此如果希望加载另一个同名事件则需要先取消加载然后重新 bind $('#modalContinue').unbind...请求成功可调用回调函数。如果需要在出错执行函数,请使用 .ajax。 参数 Attr Exp url 必需。规定将请求发送的哪个 URL。 data 可选。规定连同请求发送到服务器的数据。

    9.7K30

    Android widget之CompoundButton

    简介 具有两个状态的按钮,已选中或未选中。当按下或点击按钮,状态会自动更改。...() — 将视图的状态更改为当前状态的逆(反向) 子类 CheckBox 复选框:可以选中取消选中的特定类型的双状态按钮。...RadioButton 单选按钮:是可以选中取消选中的双状态按钮。当单选按钮被取消选中,用户可以单击来选中它。 注:单选按钮通常与RadioGroup在一起使用。...当多个单选按钮在RadioGroup内,检查一个单选按钮将取消选中所有其他单选按钮。 <?xml version="1.0" encoding="utf-8"?...android:textOn setTextOn(CharSequence) 当开关在 开打 状态使用的文本 android:track setTrackResource(int) 开关拇指滑动的“

    2.3K20

    Rhino-learn

    右键:拖动2D画布/转动3D视角;Shift+右键:拖动3D画布(按 Home 复原视图更改) 左键:选中和拖动物体;(拖动最好关掉操作轴) Command的选项:左键点选,或输入选项括号中的英文字母...(不分大小写),按 Enter Shift选择其他对象,Ctrl从选择中删除对象,Esc取消选择 Ctrl+Shift:子对象(面、线、点)选择 Ctrl+Z撤销;Ctrl+Y重做...Tap Alt after starting to drag to toggle copy mode....在Material中新建(加号)-Custom-在图标上右键-Asign to Object;将下方Transparency拉到100%;IOR处右键选择Water 保存 ? ?...软件使用途中,如果不明白软件内某个按键的作用,可以在资源2在线搜索(快捷键为F1)。(完成这步,代表你已入门并可以实现简单的几何模型。) 去官方Tutorial看level1和level2教程。

    1.2K10

    CompoundButton

    CompoundButton 具有两种状态的按钮,选中和未选中。当按钮被按下或点击,状态会自动改变。 这是一个抽象类,目前有的子类有 复选框,单选按钮,开关,切换按钮。...复选框 复选框是一种特定类型的双状态按钮,可以选中取消选中。 单选按钮 单选按钮是两个状态的按钮,可以选中也可以取消选中。...int getAutofillType() 描述此视图的自动填充类型,因此 AutofillService可以AutofillValue 在自动填充视图创建正确的类型。...Parcelable onSaveInstanceState() 钩子允许视图生成其内部状态的表示,以后可以使用该表示创建具有相同状态的新实例。...void toggle() 将视图的选中状态更改为与其当前状态相反的状态 CompoundButton的受保护的方法 void drawableStateChanged() 每当视图的状态发生变化以影响显示的可绘制对象的状态

    2K20

    jupyter扩展插件Nbextensions使用

    rubberband插件主要是可以可以同时选中两个cells.由于本机的ipython属于较高的版本rubberband插件在本机并不能使用,只能使用Shift+J按钮选中下一个或者Shift+K按钮选中上一个...Usage Exercise 这里我们实验的是Exercise插件,我们先选中第一个cell1使用Shit+J按钮选中下两个cells.使用Alt+s这是三个cell合并到一起。...如果我们不想使用solution功能也可以使用相同的快捷键进行取消。 ? Exercise2 Exercise2基本使用方式和Exercise一致只是快捷键为Alt+D ?...---- ExecuteTime 执行时间,用于显示程序代码执行时间 如果隐藏时间可以双击显示时间的条目,或者 Cell -> Toggle timings -> Selected menu item...如果再点击一下表示显示.同理对于所有cell的执行时间,可以通过 Cell -> Toggle timings -> All ?

    2.9K40

    Modelsim的仿真之路(代码覆盖率)

    除了x要特殊一丢丢 branch, condition,expression, statement, extended toggle, finite state machine 03 启动覆盖测试吧...直接双击对应的目标,会直接显示其在源码中的位置 接着在分析界面将覆盖类型换成Toggle,然后选中test_sm,分析界面再点dat,详细说明的界面就会出现对应的跳转情况 要是没这个Details...鼠标直接放到对应的代码位置,也能显示 05 在Files界面,可以选定要排除覆盖测试的文件,右键 > Code Coverage > Exclude Selected File ,Cancel...就可以取消排除...然后可以看到整体发生变化,代码界面的√和×都变为了E的字样 E*指的就是被排除在外,但测试还是被击中过,E就是完全被排除在外了,可以点那个图标,然后看详细描述里的信息理解。...Text ,类型就看自己需要了 (也可以在Instance, sim, files 界面右键找对应的导出键) 根据要的内容做报告 导出后,文件内容 导出那个HTML就相对图形化显示 如果要把使用了排除覆盖测试的文件状态也导出

    1.2K10

    IDEA快捷键拆解系列(三):Edit篇

    Edit Undo ( 撤销 ) Ctrl + Z Redo ( 重做还原、取消撤销 ) Ctrl + Shift + Z ---- Cut ( 裁剪 ) Ctrl + X Copy...Occurrence ( 依次往下开始选择当前选中内容的下一个同一内容 ) Alt + J Unselect Occurrence ( 依次往下取消选择当前选中内容的下一个同一内容 ) Alt +...查找所选内容在项目中的所有出现处 ) Alt + F7 Find Usages Settings Ctrl + Alt + Shift + F7 Show Usages ( 在项目中查找展示所选内容的全部使用处...) Ctrl + Alt + F7 Find Usages in File ( 在当前文件中查找所选内容的使用处 ) Ctrl + F7 Highlight Usages in File ( 在当前文件中高亮所选内容使用处...向下复制整行 ) Ctrl + D Indent Selection ( 整行缩进 ) Tab Unindent Line or Selection ( 整行缩退 ) Shift + Tab Toggle

    67820

    python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例

    QRadioButton 只有一个的时候,功能类似于复选框, 可以选择和取消,但是如果有多个,则必须有一个被选中 QRadioButton类中常用的方法 方法 描述 setCheckanle() 设置按钮是否已经被选中...self.setLayout(layout) self.setWindowTitle('RadioButton demo') def btnstate(self,btn): #输出按钮1与按钮2的状态,选中还是没选中...QRadioButton代码分析 在这个例子中,两个互斥的单选框被放置在窗口中 第一个单选按钮btn1,被设置成默认状态 self.btn1.setChecked(True) 当选择两个按钮相互切换,...按钮的状态发生改变,将触发toggle信号,并与槽函数btnstate()连接。...不过,一般使用QButtonGroup来对按键进行分组。通过按键分组的方式来让不同类型的QRadioButton不互相排斥。

    3.3K41
    领券