mat-tab 上的奇怪行为

Question

我在使用 Angular Material 选项卡时遇到了一个奇怪的问题，希望有人能帮助我解释发生了什么。 https://stackblitz.com/edit/angular-ivy-yttids

我有一个带有 3 个选项卡的 mat-tab 组件。我的目标是在用户第一次单击任何选项卡时立即调用外部服务，并在选项卡内容中显示结果。

在页面初始化时，会生成选项卡，并且 Tab-1 已被选中。如果我按特定顺序单击选项卡 (Tab3->Tab2-Tab1)，一切都如预期的那样。但是，如果我先单击 Tab2，在页面刷新后，它不会被激活，但焦点会无缘无故地自动传递到 Tab-3 上。该行为仅在 Tab1 上重复一次并恢复正常，这意味着我可以激活我单击的选项卡。

这是您可能想检查一下的另一种奇怪的点击顺序：

Tab2（传递给 Tab3）
Tab2（显示内容）
Tab1（传递到 Tab3）
Tab1（显示内容）
Tab3（显示内容）
Tab1（显示内容）
Tab2（无选项卡内容，虽然内部变量很好并且正在执行第 2 步）

如果你能看看 link 并告诉我你是否能弄清楚到底发生了什么，我将不胜感激。

谢谢

Answer 1

好吧，您实际上是在更改用于呈现选项卡的 section 变量。（在你的 *ngFor 里面）。

更改此部分将强制 mat-tab 重新加载组件，这会导致一个有趣的错误 （抱歉，无法解释得更好）。

我的选择是添加一个 trackBy 函数，所以你告诉 angular 只重新加载确实发生变化的元素。

解决方案在 stackblirtz

将 trackBy 函数添加到您的 .component.ts

 trackByIndexFn(index: any, item: any) {
    return index
  }

然后进入你的.component.html

<div *ngIf="input">
  <mat-tab-group
    #tabs
    mat-align-tabs="center"
    animationDuration="0ms"
    [(selectedIndex)]="selectedIndexBinding"
    (selectedIndexChange)="onTabChanged($event)"
  >
    <mat-tab
      *ngFor="let section of parts; index as tabNo; trackBy: trackByIndexFn" <!-- Here, I use the trackBy function -->
    >
      <ng-template mat-tab-label>
        <span class="tab-heading">Tab {{ tabNo + 1 }}</span>
      </ng-template>
      <ng-template matTabContent>
        <br />
        <div *ngFor="let data of section; index as i">
          <div style="text-align:center">{{ data }}</div>
          <br />
        </div>
      </ng-template>
    </mat-tab>
  </mat-tab-group>
</div>

您不仅避免了错误，还优化了您的代码 ;)

mat-tab 上的奇怪行为

Strange behavior on mat-tab

angular

angular-material

mat-tab