更改或单击 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屋!