更改或单击 mat-button-toggle 的事件 [英] Change or click event of mat-button-toggle

问题描述

我有一个 mat-button-toggle-group，它有 5 个 mat-button-toggle.我需要在点击或更改 val 时触发一个事件，尽管我更喜欢它是一个点击事件.

I have a mat-button-toggle-group which has 5 mat-button-toggle. I need to fire an event on the click or on the change of the val, although I prefer it be a click event.

此处 提供的文档显示没有点击事件，但有更改事件.

The documentation provided here shows there is no click event, but there is a change event.

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

I have tried the change event too (as shown below) , but the event is not getting triggered.

 <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 文件中

In My .ts file

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

import {MatButtonToggleModule} from '@angular/material/button-toggle';

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

如何触发上述更改功能?

How to trigger the above change function?

推荐答案

应该是:

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)
}

检查这个正在工作的stackblitz

这篇关于更改或单击 mat-button-toggle 的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！