角のある材質2タブ動的コンテンツ

Question

タブがクリックされたときにFacebook APIへのhttp呼び出しをしようとしています（これはgetAlbumメソッドの機能です）。 mat-tab要素に(click)属性を追加しようとしましたが、アクティブ化しません。これにより、私は属性をmat-groupに置くことができましたが、必要なデータは現在範囲外です。

<mat-tab-group (selectedTabChange)="getAlbum(header.id)"> 
    <mat-tab *ngFor="let header of bachataAlbumHeaderNames" #albumId="header" label="{{header.name}}={{header.id}}"> 
    <div *ngFor="let image of bachataPicsArray; let i = index"> 

     <img flex (mouseenter)="mouseEnter($event, i)" [ngClass]="hoveredId === i ? depth5: depth1" id="{{image.id}}" (mouseleave)="mouseLeave($event)" 
     class="gallery_pic" src="{{image.image}}" alt="Bachadiff Cardiff Bachata class picture of people enjoying the dance" /> 
    </div> 
    </mat-tab> 
</mat-tab-group> 

Answer 1

タブのインデックスがbachataAlbumHeaderNames配列に対応するので、あなたはselectedIndexChange出力イベントにアクティブなタブのインデックスを介してヘッダIDにアクセスすることができる：

HTMLテンプレート：

<mat-tab-group (selectedIndexChange)="getAlbum($event)"> 

Typescriptクラス：

getAlbum(tabId) { 
    const headerId = this.bachataAlbumHeaderNames[tabId].id; 
    // API calls... 
} 

私はcreat ed a stackblitz example。