在MatTab材质上创建(单击)事件 [英] Create (click) event on MatTab Material

问题描述

我动态地遍历选项卡，并且我想添加一个(单击)事件以在选择选项卡时能够加载不同的选项.

I dynamically loop thru tabs and i would like to add a (click) event on to be able to load different options when i select tab.

是否有可能发生一个事件(单击)事件?我尝试使用(selectChange)，但是创建选项卡时无法从循环中获取bank.id.

Isn't it possible to have an event (click) event on ? I tried with (selectChange) on but then i cannot get hold of bank.id from my loop when creating tabs.

不可能在动态创建的标签上添加简单的点击事件吗?

Isn't it possible to add simple click event on dynamically created tabs??

    <mat-tab-group>
  <mat-tab label="All transactions">
    <mat-list>
      <mat-list-item *ngFor="let bank of banks">
        <h4 mat-line>{{bank.fullName}}</h4>
      </mat-list-item>
    </mat-list>
  </mat-tab>
  <mat-tab *ngFor="let bank of banks" (click)="fetchAccounts(bank.id)" label="{{bank.fullName}}">

    <mat-list>

      <mat-list-item *ngFor="let account of accounts">
        <h4 mat-line>{{bank2.fullName}}</h4>
      </mat-list-item>
    </mat-list>
  </mat-tab>
  <!-- <mat-tab label="Test Bank" disabled>
    No content
  </mat-tab> -->

</mat-tab-group>

推荐答案

是否可以在动态创建的标签上添加简单的点击事件? -不，我认为这是不可能的，但是您可以将<mat-tab-group>上的(selectedTabChange)用作:

Isn't it possible to add simple click event on dynamically created tabs? - no i think, it isn't possible, but you can use (selectedTabChange) on <mat-tab-group> as:

<mat-tab-group (selectedTabChange)="yourFn($event)">

事件对象拥有一个索引，因此您可以执行以下操作:

The event-Object holds an index, so you can do something like this:

yourFn($event){
    this.fetchAccounts(this.banks[$event.index].id)
}

示例: https://stackblitz.com/edit/angular-xurhan

这篇关于在MatTab材质上创建(单击)事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！