MatTabGroup 无法可靠地显示分页按钮

Question

我在使用 Angular Material Tabs 组件时遇到问题。我正在尝试使用 MatTabGroup 中的一些选项卡。问题是，当我的组件创建时，即使现有选项卡占用的空间超过可用空间，分页按钮也不会显示。

请看下面的截图：

现在，在大多数情况下，如果我增加和减少浏览器缩放级别，按钮会突然显示，请参见此处：

该选项卡组的内容创建如下：

<mat-tab-group>
  <mat-tab *ngFor="let thing of things"
           label="{{'thing.name'}}">
    <ng-template matTabContent>
      <custom-component [thing]="thing"></custom-component>
    </ng-template>
  </mat-tab>
</mat-tab-group>

我注意到，dom 中总是有两个具有

.mat-tab-header-pagination

类的容器，每个分页按钮都有一个。两者都有

display: none

。不知何故，设置

display: flex

属性的机制无法可靠地启动。

有人可以告诉我这可能是什么问题吗？我可以触发重新评估是否应该手动显示按钮吗？

感谢您的帮助！

Answer 1

为了解决这个问题，我添加了这个样式，我的问题就解决了

::ng-deep .mat-tab-list {
  width: 100%;
}

Answer 2

@ViewChild("panelTabs", {
  static: false
}) panelTabs: MatTabGroup;

constructor() {
  this.setIntervalX(() => (this.panelTabs ? ._tabHeader as MatPaginatedTabHeader).updatePagination(), 1000, 10)
}
setIntervalX(callback, delay, repetitions) {
  var x = 0;
  var intervalID = setInterval(() => {
    callback();
    if (++x === repetitions)
      window.clearInterval(intervalID);
  }, delay);
}