时间戳

首页 > 解决方案 > 为什么点击时没有触发功能

angular - 为什么点击时没有触发功能

问题描述

我在我的项目中使用制表符角材质： https ://material.angular.io/components/tabs/examples

这是代码：

  <mat-tab-group animationDuration="0ms" >
    <mat-tab></mat-tab>
    <mat-tab (click)="setData(upgrade.name)" [label]="upgrade.name" *ngFor="let upgrade of upgradeType; let i = index"> </mat-tab>
  </mat-tab-group>

功能：

  setData(data){
    alert(data)
  }

但是，当单击选项卡时，不会执行 setData 函数。

知道为什么单击选项卡时不执行 setData 函数吗？

标签： angulartypescriptangular-material

解决方案

mat-tab没有click属性。所以，需要使用mat-tab-group属性(selectedTabChange)来实现。一旦选项卡更改，它将触发。

尝试使用：

mat-tab.component.html

<mat-tab-group (selectedTabChange)="setData($event)" animationDuration="0ms" >
    <mat-tab></mat-tab>
    <mat-tab [label]="upgrade.name" *ngFor="let upgrade of upgradeType; let i = index"> </mat-tab>
</mat-tab-group>

mat-tab.component.ts

setData(event: MatTabChangeEvent) {
    console.log("click", event.tab.textLabel); //console out will be click {{upgrade.name}}
}

这是工作stackblitz：

https://stackblitz.com/edit/angular-wzc6m3-rpap1a?file=src/app/tab-group-align-example.html

希望这可以帮助 ：）

推荐阅读