mat-button-toggle 的更改或单击事件

2024-03-15

我有一个垫子按钮切换组,其中有 5 个垫子按钮切换。我需要在单击或更改 val 时触发一个事件,尽管我更喜欢它是一个单击事件。

提供的文档here https://material.angular.io/components/button-toggle/api显示没有点击事件,但有更改事件。

我也尝试过更改事件(如下所示),但该事件没有被触发。

 <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="rowAction">
  <mat-button-toggle value="raw_swift_msg" (change)="onValChange(value)" matTooltip="View Message">
    <i class="fa fa-eye" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
  <mat-button-toggle value="message_comment" matTooltip="Message Comment">
    <i class="fa fa-comments" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
  <mat-button-toggle value="link_trade" hasAccess id="LinkMessagePopup" matTooltip="Link Message">
    <i class="fa fa-link" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
  <mat-button-toggle value="audit_trail" matTooltip="View Audit">
    <i class="fa fa-history" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
   <mat-button-toggle hasAccess id="MessagePopup" value="move_message" matTooltip="Move message">
    <i class="fa fa-exchange" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle> 
  <mat-button-toggle value="log" matTooltip="View log">
    <i class="fa fa-book" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
</mat-button-toggle-group>

在我的 .ts 文件中

从 '@angular/material/button-toggle' 导入 {MatButtonToggleModule};

onValChange(val: string) {
 this.selectedVal = val;
}   

如何触发上述变更功能呢?


它应该是 :

html:

 <mat-button-toggle-group #group="matButtonToggleGroup">
  <mat-button-toggle value="raw_swift_msg" (change)="onValChange($event.value)" matTooltip="View Message">
    <i class="fa fa-eye" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
  <mat-button-toggle (change)="onValChange($event.value)" value="message_comment" matTooltip="Message Comment" >
    <i class="fa fa-comments" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
</mat-button-toggle-group>

成分:

onValChange(value){
     console.log(value)
}

检查这个工作堆栈闪电战 https://stackblitz.com/edit/angular-mexdkw

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

mat-button-toggle 的更改或单击事件 的相关文章

  • NodeJS 中的 uglify-js“找不到模块”

    在这里我正在创建应用程序来压缩 javascript 文件 我所做的步骤 在我的本地机器上安装了nodeJS 检查节点和 npm 正在工作 通过 npm install uglify js g 安装 uglify js 并安装 当我尝试在命
  • 没有 ssl 的 Web 加密 API

    我编写了一个用于安全消息传输的小网络应用程序 以了解有关加密的更多信息 并想向我的朋友展示它并让他们玩一下 所以我将它托管在我的小服务器上 并惊讶地发现 Web Crypto API 我竭尽全力开始工作 因为它的错误消息不是很具体 需要 S
  • Facebook 分享不显示来自开放图元标签的图像

    我正在尝试将 Facebook 共享按钮集成到我雇主的网站 标题 网址 描述 简介均显示正确 但未附加任何图像 当共享对话框打开时 图像容器会闪烁 然后消失 就好像 facebook 正在尝试处理图像但失败一样 我正在使用 og image
  • 防止Rails Turbolinks导致Google地图JS多次执行

    我目前正在开发 Rails 应用程序 但出现以下错误 您已在此页面上多次包含 Google Maps API 这可能会导致意外错误 经过一番研究后 我发现 Turbolinks 导致了这个问题 当 的时候link to单击后 Google
  • JavaScript 按属性删除对象数组中的元素

    我有一个以下形式的对象数组 prop1 value1 banks id value property2 value2 所以我想要做的是通过搜索 id 值来删除 banks 属性中的元素 然后从banks数组中删除找到的元素 id 属性具有唯
  • 文本溢出上的点样式:省略号

    是否可以对点进行样式设置text overflow ellipsis 一个例子是将省略号加粗 如 Lorem Ips 灵感来自这个答案 https stackoverflow com a 21861334 3244925 这是一种设置省略号
  • 'string | 类型的参数字符串[] |解析Qs |解析Qs[] | undefined' 不能分配给'string' 类型的参数

    这个错误一直困扰着我 此代码中出现 Type string is not allocate to type string 错误 export const generateLabelFile functions https onRequest
  • ES6 标记的​​模板函数如何解释它们的参数顺序?

    考虑以下代码 function f console log Array from arguments var x 2 var y 3 f before x y after 论据f将会 根据 Traceur http google githu
  • 如何在角度2中动态地在输入框上添加工具提示

    我有一个输入框 我想在将鼠标悬停在输入框上时显示工具提示消息 这将基于我们从服务获得的响应 如果服务响应为 true 则工具提示中的消息将为 true message 如果服务返回 false 则该消息将为 false message 这是
  • 淡出图像上的文字

    我知道如何使用 CSS 透明渐变淡出纯色背景上的文本 但是如何才能淡出图像背景上的文本呢 这是我想要的一个例子 注意 我需要像图像一样的静态效果 而不是动态过渡 CSS mask image可能是您正在寻找的 div background
  • 将复杂对象传递给 ui-sref 参数

    我需要这样的构建网址 列表 过滤器 状态 1 过滤器 类型 2 I do link a List a 在参数中传递复杂对象 如果传递简单对象 filter 1 可以 但我需要这个 state state list url list filt
  • 当直接调用函数时,React 如何/为什么知道函数组件内没有调用钩子?

    出于好奇 我想call直接一个React函数组件 就像常规函数一样 然而 React 抱怨道 Invalid hook call Hooks can only be called inside of the body of a functi
  • 删除数组中的重复元素[重复]

    这个问题在这里已经有答案了 可能的重复 在 JavaScript 数组中查找重复值的最简单方法 https stackoverflow com questions 840781 easiest way to find duplicate v
  • localhost/test.php 不返回任何内容

    我正在遵循教程构建一个网络应用程序 我创建了一个简单的test php网络空间中的文件 var www html 问题是当我输入localhost test php在浏览器地址窗口中 它返回一个空页面 我试过localhost php in
  • 如何将函数绑定到DOM事件一次且仅一次,以便在事件触发时不会再次执行?

    所以我有以下形式的锚标签 a href link 我在页面加载时应用以下内容 我的意思是 文档准备就绪 jQuery a rel Tab click function e e preventDefault then I do some st
  • AngularJs:当放置在 ng-view 标签内时,ng-include 不起作用

    我正在通过 ng view 内的角度路线加载 html 页面 我正在加载的页面包含一个 ng include 标签 指向 另一个 html 文件 我尝试了以下所有语法 div src div div div div src include
  • Mongoose - 遍历对象

    在 node js 上使用 mongoose 我试图找到玩家 game players id 等于我传递的 id 的所有游戏 Schema var Game mongoose Schema id String date type Date
  • Google 地图 v3 信息窗口在地图视口外打开

    如果单击地图视口顶部附近的标记 信息窗口将加载到可视区域之外 并且必须拖动地图才能查看信息窗口内容 理想情况下 我不希望地图自动平移 有没有办法以不同的方向加载信息窗口 例如如果标记位于视口的顶部 则以向下的方向显示信息窗口 不 你不能以不
  • 如何对数字进行排序? [复制]

    这个问题在这里已经有答案了 下面是代码 Is the sortNumber对数字进行排序的函数 a 和 b 是什么意思以及为什么存在 为什么sortNumber in n sort sortNumber 没有指定任何参数a and b Ja
  • 从 Bigcommerce 的浏览器内存中删除注入的分析库?

    我们如何删除这个脚本注入器系统并清除内存中的函数 简报 最近 Bigcommerce 的不法分子以 监控 为幌子创建了一个分析注入器 JS 该注入器被锁定在全局变量中 他们在未经任何 OP 同意的情况下将其推广到所有 50 000 家前台商

随机推荐

  • python 中的图形上有很多边

    我有以下脚本 import pandas as pd from igraph import df p c pd read csv data edges csv edges list edges vertices list dict case
  • 您可以以非 root 用户身份在非特权容器中运行 DPDK 吗?

    我正在尝试在非特权 Docker 容器中运行 DPDK 虽然我可以限制容器的权限并将容器指定为非特权容器 但我仍然需要以 root 身份运行 dpdk 应用程序 例如 testpmd 我还可以以非 root 身份运行容器并使用 sudo 启
  • 将 .NET Core 2.0 Web 应用程序发布到 Azure 应用服务时出错

    我最近将 Visual Studio 2017 Community Edition 从版本 15 6 2 升级到 15 6 3 从那时起 我一直无法使用现有的发布配置文件成功将 NET Core 2 0 Web 应用程序部署到我的 Azur
  • 有什么方法可以捕获声明时常量的名称吗?

    我有课 我们称之为 SomeClass class SomeClass end 我不想以正常方式定义此类的实例 而是使用常量来定义它们 MyConstant SomeClass new 我希望能够捕获某个类设置的常量的名称 就像标准 rub
  • Webpack SASS-loader include 语句中断 SASS @import 语句

    因此 对于背景 最初我在 Webpack 配置中排除了 node modules 目录 该目录对于我的 sass import 语句运行良好 但很难包含 node modules 目录中的内容 所以我将SASS加载器切换为以下 test s
  • 获取与 URL 关联的所有 IP,Python

    我正在尝试查找与某个 URL 关联的所有 IP 我一直在使用 socket 包 但对不同功能返回的不同数量的 IP 感到困惑 例如见下文 有没有返回所有IP的函数 socket gethostbyname google com return
  • 使用Python mechanize下载文件

    我正在尝试使用 python 和 mechanize 从网站下载文件 我当前的代码成功登录网站并打开包含下载链接的页面 下载链接是 https www lendingclub com browse browseNotesRawDataV2
  • 升级到 XCode 4 后无法链接 ppc

    我跟着这些说明 https stackoverflow com questions 5333490 how can we restore ppc ppc64 as well as full 10 4 10 5 sdk support to
  • 单击 POI 时获取谷歌地图上的 placeId

    我在我的网站上使用 Google Maps JS V3 API 当用户搜索某个地点时 我可以通过 placeId 使用 getDetails 当用户单击 POI 时 我想执行相同的操作 但是 当用户单击 POI 而不是使用搜索框时 我似乎找
  • Fabric.js 子类中的颜色正在更改为黑色。

    我正在尝试子类 Fabric Group 并将 JSON 字符串加载到其中 我遇到的问题是子类组中的 Fabric Rect 的颜色正在更改为黑色 当我直接在 Fabric Group 中执行此操作时 效果很好 我一直在玩 fromObje
  • Ruby Mailer:参数数量错误

    我正在努力构建我的邮件程序 但我不断遇到 参数数量错误 0 代表 1 可以说我疯了 但我觉得我定义的一切都是正确的 控制器 为简洁起见被截断 def create cms484 Cms484 new cms484 params respon
  • scala 中的间接递归泛型类型定义

    直接类型递归就可以工作 trait TT T lt TT T 但我可以用天真的方法做间接的 trait UU V lt VV UU V trait VV U lt UU VV U 给我错误 CyclicTraits scala 23 err
  • C++ 中对外部命令的线程安全并发调用

    我一直在互联网上寻找一种方法 以线程安全的方式从我的 C 程序中并发调用外部程序 据我了解 popen system 和 fork 都不是线程安全的 在我看来 这里缺少了一些东西 到目前为止我还没有找到 是否有可能没有办法从不同线程并发调用
  • 禁用特定块的全页缓存

    我正在使用具有全页缓存功能的 magento EE 有一个动态更新的块 但我似乎无法禁用它的缓存 我想要实现的理想目标是 仅禁用特定块的缓存 以便每次页面加载时都会再次呈现它 我尝试过的事情 将 unsetData 包含到布局文件中
  • 如何计算 WPF 绑定中的值

    我有一个应用程序 它使用两个滑块来生成在代码中其他地方使用的产品 我想要的是将产品值绑定到文本块或工具提示 例如 看起来像 10 x 15 150 第一部分很简单 如下所示
  • 如何在面向 .NET Core 的 Visual Studio 2015 中引用 System.Data?

    我正在尝试访问IDbConnection接口在类库中 以便创建一个连接对象来连接数据库并从数据库中获取数据 但我无法访问IDbConnection接口应该是在系统数据 dll 我在 NuGet 中也找不到它 那么 我该怎么办呢 Micros
  • 想要在提交表单后刷新 div 吗?

    我有一个简单的表格和一个 div 容器 我的问题是我在提交表单时尝试刷新 div div FOO FOO FOOOOOOOOOOOOOOOOO div div
  • 如何在 iOS 8 启动屏幕中设置标签字体

    我们如何在启动屏幕中将字体设置为标签 我尝试过通过故事板设置自定义字体 该字体已应用并在情节提要中看到 但当我启动应用程序时 我无法看到应用的字体 如何克服这个问题 尽管它可能看起来像在 Xcode 6 中一样 但您无法为启动屏幕指定自定义
  • 在实体版本 6 的 WCF 中使用“include”语法时,复杂对象不会返回

    好吧 这让我很困惑 因为我刚刚看到我的客户端在返回带有 include 的对象时基本上断开连接并终止 然而 如果没有 WCF 服务 它也可以正常工作 问题是我真的希望通过导航设置那些连接的对象 基本上 代码是一个复杂的对象返回 public
  • mat-button-toggle 的更改或单击事件

    我有一个垫子按钮切换组 其中有 5 个垫子按钮切换 我需要在单击或更改 val 时触发一个事件 尽管我更喜欢它是一个单击事件 提供的文档here https material angular io components button tog