각진 재질 2 탭 동적 내용

Question

탭을 클릭 할 때 Facebook API에 http 호출을 시도하고 있습니다 (이것이 getAlbum 메서드입니다). mat-tab 요소에 (click) 속성을 추가하려고 시도했지만 활성화되지 않았습니다. 이로 인해 mat-group에 (onSelect) 속성이 추가되었지만 필요한 데이터가 범위를 벗어났습니다.

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

ed a stackblitz example.