问题标签 [mat-tab]

您看到数据已正确呈现，但每页的项目未定义加上搜索输入类型宽度缩小但如果我重新加载页面正确，怎么会？为什么当我访问此页面以及刷新数据时这种有线行为正确呈现

打字稿文件的代码 -

.ts

和 html 文件代码 -

只是为了让您知道带有此类表格的其他页面，垫子分页器效果很好，只有这个困扰着我，感谢您的帮助，提前谢谢...

由于路由，我使用 mat-tab-nav-bar 而不是 mat-group。但是在垫组中，当前选项卡下有一条“蓝色”线。“mat-tab-nav-bar”中是否有可能获得相同的功能？

我有多个 mat-tab-group 到一个 HTML 页面中，例如：

我的 .ts 包含：

在第一个 mat-tab-group 中，索引 0 被很好地选择（第一个 mat-tab 是下划线）但是对于另外两个，没有 mat-tab 是下划线，就像没有一个被选中：/

这是一个重现问题的stackblitz：https ://stackblitz.com/edit/angular-oykb2e?file=app/tab-group-dynamic-example.html

例如，工作：

不工作：

当我希望解决将最后一个选项卡移动到组右侧的问题时，我遇到了这个示例——这正是我所需要的。

这是一个例子：StackBlitz

我已经尝试添加一个类并尝试以下操作......但我无法只为一组更改样式。

我怎样才能只使 CSS 效果成为我的组的特定效果？

我使用 CSS 垂直排列了我的角度材质选项卡。不幸的是，没有显示导航到不可见选项卡的分页

我的容器具有固定高度（最大高度：177px），因此只有一定数量的选项卡可见。超过此固定高度时，应出现分页。

这是我的垂直标签的 CSS / SCSS：

我的模板结构如下：

在开发工具中，模板如下所示：

目前它看起来像这样（6 个元素可见。但容器中有超过 6 个选项卡）：

我有一个带有 mat-tab-group 的屏幕，一个选项卡包含一个带有可扩展行的表格，这些行只有在单击它时才会展开，但这里的问题是，如果我们更改选项卡并返回，它将自动展开所有行。这里有什么问题。?

这将第一次正确显示

它将展开所有行

链接：StackBlitz 示例

我正在尝试制作一个简单的 :enter/:leave 动画来处理 mat-tab 内的 mat-list。初始动画没有问题，切换到不同的选项卡并返回第一个时出现问题。那个时候动画没有被触发并且列表保持隐藏状态。

列表消失是有道理的，因为当您切换到不同的选项卡时，选项卡的内容会从 DOM 中删除。有没有办法将内容保留在 DOM 中或确保再次触发动画？

这是我当前的模板和组件。我还做了一个 Stackblitz 示例。

https://stackblitz.com/edit/angular-9-material-starter-sqsqgu?file=src/app/app.component.html

回答

因此，在使用 Kavinda Senarathne 的答案后，我最终得到了完美运行的模板。

我正在使用 mat-tab-group 并且我希望在向下滚动到内容时修复选项卡标题。所以，我固定了标签内容的高度。我可以滚动浏览带有固定标题的内容。但是，然后我在页面上看到两个滚动条，这很奇怪。有没有其他方法可以在滚动浏览内容时修复选项卡标题？附上片段：

[编辑]：我更希望修复 mat-tab 的标题。那么，有没有直接的方法来代替固定样式的高度呢？

我想将一些自定义样式仅应用于父mat-tab-group级而不影响子级mat-tab-groups。因此，我尝试仅向父级添加自定义类，mat-tab-group但它不起作用。有什么办法可以做到这一点？

问题的一个stackbitz例子： -演示

实际项目的

• 角度版本 - 8.2.14
• 角材料版本 - 8.2.3

Stackbitz 示例的源代码：

选项卡组基本示例.html

选项卡组基本示例.css

选项卡组基本示例.ts

我愿意在 Google 页面等移动设备上重现可使用手指滚动的标签：

但是使用 mat-tab (Material Design & Angular)，我有两个箭头显示：

我设法用 删除了箭头disablePagination = true，但是用手指滚动不起作用：

任何人都有解决方案让它工作？

代码：