我有一个垫子按钮切换组,其中有 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(使用前将#替换为@)