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

【问题标题】：Angular Material Tabs - New added tab is half hiddenAngular Material 选项卡 - 新添加的选项卡是半隐藏的
【发布时间】：2021-06-22 07:01:20
【问题描述】：

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

stackblitz code here

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

【问题讨论】：

标签： angular angular-material angular-material-tab

【解决方案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)
  }

【讨论】：

是的，这是为了模拟我从 API 获取数据。对我来说，问题是如果我在导航到选项卡后更新标题，则选项卡位置不会更新。
您正在尝试添加新标签。那么，添加新标签后，您会从 API 中获取标题和内容吗？
是的，初始标题是一个前缀（例如用户），在获得 API 响应后，我正在尝试将用户名添加到选项卡的标题中。
关注了您稍后添加的问题。所以，我找到了一种解决方法。请检查。