Question

我通过标签动态循环，我想添加一个（点击）事件，以便在我选择标签时加载不同的选项。

是否可以举办活动（点击）活动？我尝试使用（selectChange）但是在创建标签时我无法从循环中获取bank.id。

是否可以在动态创建的标签上添加简单的点击事件？

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

Answer 1

是否可以在动态创建的标签上添加简单的点击事件？ - 不，我认为，这是不可能的，但您可以在<mat-tab-group>上使用（selectedTabChange）：

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

event-Object包含一个索引，所以你可以这样做：

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

实施例： https://stackblitz.com/edit/angular-xurhan

Answer 2

我没有和您一样的问题。我所需要做的只是在mat-tab上进行一次简单的单击事件。我在click事件上更改了路由，但click事件未绑定到选项卡。我做了一些研究，您可以做的是创建一个自定义标签，在该标签上放置点击事件。例如...

<mat-tab>
    <ng-template mat-tab-label>
        <span (click)="onClick()">Custom label</span>
    </ng-template>
</mat-tab>

如果您动态创建选项卡，这将起作用。扩展您的示例...

<mat-tab *ngFor="let i of [1, 2, 3]">
    <ng-template mat-tab-label>
        <span (click)="onClick()">Custom label {{i}}</span>
    </ng-template>
</mat-tab>

我唯一遇到的问题是span的CSS。它没有任何填充，因此您实际上必须单击跨度本身才能使事件起作用。如果您在其外部但在选项卡中单击，则选项卡将更改，但事件不会触发。

要解决此问题，请在此范围内增大填充。例如，

.custom-label { padding: 15px 0 15px 0; }

例如，这对我有用，但是在左侧和右侧仍然有单击无法触发的空间。我没有解决那个。

Answer 3

非常感谢你 - 真的很聪明的解决方案让我无法理解。

这是从银行获取帐户的最终方法 - 但能够将（单击）方法添加到选项卡会很不错。：）

 fetchAccounts($event) {
    console.log(this.banks[$event.index].id);
    this.northbricksApi.fetchAccounts(this.banks[$event.index].id).subscribe(accounts => {
      this.accounts = accounts.accounts;
      console.log(this.accounts);
    });
  }

Answer 4

使用[selectedIndex]动态设置直通

Answer 5

问题不在于mat-tab。问题是您尝试传递给MatTabGroup的值包含在MatList中。例如，如果您这样做：

<h4 mat-line (click)="getValue(bank)">{{bank.fullName}}</h4>
getValue(value: string) {
  console.log(value);
}

那会有用。因为你需要从TabGroup中获取值，所以基本上你必须做Void先生所说的。

在MatTab材质

5 个答案: