angular - Angular Material 选项卡 - 新添加的选项卡是半隐藏的

Question

添加选项卡后，我正在设置选项卡标题。正因为如此，一半的选项卡不在屏幕上。有没有办法重新调整标签？

stackblitz代码在这里

- 编辑https://github.com/angular/components/issues/17853，似乎这是一个问题。

标签： angularangular-materialangular-material-tab

Answer 1

这是由以下语句引起的：

setTimeout(() => {
    this.tabs[this.tabs.length - 1] += " - Added title"
}, 2000)

渲染 2 秒后，您将更改新添加的选项卡的标题。

这就是新标签标题无法正确显示的原因。

因此，如果您真的想更改选项卡的标题，请在分配标题时更改它。例如：this.tabs.push('New - Added title');

删除超时。

编辑：（一种解决方法）

超时后为什么不选择该选项卡？

addTab(selectAfterAdding: boolean) {
    this.tabs.push('New');

    setTimeout(() => {
      this.tabs[this.tabs.length - 1] += " - Added title"
      if (selectAfterAdding) {
        this.selected.setValue(this.tabs.length - 1);
      }
    }, 2000)
  }