Question

单击选项卡时，我尝试对Facebook API进行http调用（这是getAlbum方法的作用）。我尝试在(click)元素中添加mat-tab属性，但它没有激活。这导致我在(onSelect)上添加了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...
}

我创建了stackblitz example。

Angular Material 2 Tab动态内容

1 个答案: