Блог

Я использую вкладки angular material в своем проекте: 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 не выполняется при нажатии на вкладку?

mat-tab не имеет щелчка property.so , вам нужно использовать 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

Надеюсь, это поможет 🙂

Я думаю, вы можете использовать selectedIndexChange . Пожалуйста, проверьте мой код и ссылку в стекблите, приведенном ниже =>
HTML:

 <mat-tab-group 
               (selectedIndexChange)="test($event)">
 <mat-tab *ngFor="let tab of upgradeType; let index = index" [label]="tab.name">
   <button mat-raised-button
            class="example-delete-tab-button"
            (click)="removeTab(index)">
      Delete Tab
    </button>
  </mat-tab>
</mat-tab-group>
 

TS:

 export class AppComponent {
  upgradeType=[];
  constructor(){
    let temp=new UpgradeType();
    temp.name="A";
    temp.id=1;
    this.upgradeType.push(temp);
    let temp2=new UpgradeType();
    temp2.name="B";
    temp2.id=2;
    this.upgradeType.push(temp2);
  }
  test(index){
    console.log(index);
    console.log(this.upgradeType[index]);
  }
}
export class UpgradeType{
  name:string;
  id:number;
}
 

ПРИМЕЧАНИЕ: код доступен в stackblitz => Демонстрационный код, который вы хотели