web-dev-qa-db-fra.com

Créer (cliquer) un événement sur le matériau MatTab

Je boucle dynamiquement à travers les onglets et je voudrais ajouter un événement (cliquez) pour pouvoir charger différentes options lorsque je sélectionne l'onglet.

N'est-il pas possible d'avoir un événement (clic) sur? J'ai essayé avec (selectChange), mais je n'arrive pas à saisir bank.id depuis ma boucle lors de la création d'onglets.

N'est-il pas possible d'ajouter un simple événement de clic sur des onglets créés dynamiquement ??

    <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>
angularangular-material2
13
MrWeiland

N'est-il pas possible d'ajouter un simple événement de clic sur des onglets créés dynamiquement? - non je pense, ce n'est pas possible, mais vous pouvez utiliser (selectedTabChange ) sur <mat-tab-group> comme:

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

L'objet événement contient un index, vous pouvez donc faire quelque chose comme ceci:

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

Exemple: https://stackblitz.com/edit/angular-xurhan

30
enno.void

Je n'ai pas le même problème que toi. Tout ce dont j'avais besoin était un simple clic sur un mat-tab. Je modifie l'itinéraire sur un événement de clic, mais l'événement de clic ne s'est pas lié à l'onglet. J'ai fait quelques recherches et ce que vous pouvez faire est de créer une étiquette personnalisée sur laquelle vous pouvez placer l'événement de clic. Par exemple...

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

Cela fonctionnera si vous créez l'onglet de manière dynamique. Pour développer votre exemple ...

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

Le seul problème que j'ai eu était avec le css pour le span. Il n'a pas de rembourrage, vous devez donc cliquer sur la portée elle-même pour que l'événement fonctionne. Si vous cliquez à l'extérieur mais dans l'onglet, l'onglet va changer mais l'événement ne se déclenchera pas.

Pour résoudre ce problème, agrandissez le rembourrage sur cette plage. Par exemple,

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

Celui-ci, par exemple, a fonctionné pour moi, mais il y avait encore de la place à gauche et à droite que le clic ne voulait pas déclencher. Je ne résoudrai pas celui-là.

3
Mario Škrlec

utilisez [selectedIndex] pour définir une boucle dynamique à travers

0
alaye diallo