问题标签 [mat-tab]

我已经设置了mat-tab一个mat-tab-group，问题是它们都共享一个表格的相同 HTML 代码，该表格是通过我在选项卡单击事件中捕获的函数动态填充的。

以下是一些代码，

因为我已经用这个功能填充标签，

如您所见，不需要多次编写该 HTML，我如何为所有选项卡共享相同的代码，伪代码就像，

我正在尝试MAT-TABLE在不同的材料选项卡之间共享一个 Angular 材料表MAT-TABS。此外，我正在从 a 获取数据，API因此我在每个选项卡单击时调用一个函数。

正在检索数据并将其插入表中，但是paginator并filter停止工作。工作代码可以在这里看到，

https://stackblitz.com/edit/angular-aq9hja

这是 HTML 的示例，

这是component.ts

撞

我有以下not working代码（在一些不完整的示例中找到）：

我不确定这应该如何工作：

• 我应该routerLinkActive在我的ts?
  
• 是什么[routerLinkActive #rla="routerLinkActive"意思？

当一个Component被放置在一个未选中的Material Tab中时，它处于断开的DOM状态，它的维度为0。当一个Component被选中时，它被添加到DOM中，并得到一个真实的维度。我需要从添加的组件内部拦截此事件。如何绑定到“添加到 dom”事件或“尺寸更改”？

PSResize事件不起作用，因为它用于窗口，而不是特定元素/视图。

问题

所以我在fruity.component.html中有3个标签，在我的最后一个标签上我有一个组件

在banana.component.ts 中，我得到了带有ViewChild 和document.getElementsByClassName('bnn')[0] 的div，但仍然显示“无法读取未定义的属性'style'”错误消息。

有没有人和我有同样的问题并解决了这个问题？

mat-tab 的行为非常奇怪，说真的我现在已经放弃了，找不到任何相关的解决方案。

一切正常。在最近和即将到来的选项卡中，当我导航到最近的选项卡时，默认情况下我会显示所有选择，同样，当用户单击即将到来的选项卡时，我会显示“全部”选项卡

当标签发生变化时，mat-ink bar 不显示，当我打开检查元素时，它突然显示，现在我从最近导航到即将到来的它工作，然后突然我更改为其他一些标签 t20，测试或 ODI，然后再次单击“最近”选项卡后，它导航到全部，并且 selectedIndex2 为 0，但未显示 mat-ink-bar，现在我关闭了检查元素选项卡，它突然出现了，所以当我切换检查元素时它可以工作，我不不知道为什么会这样？

不知道为什么会出现这种奇怪的行为angular-mat-tabs

也能够在 stackblitz 中复制问题， Stackblitz 链接中的 Angular Mat Tab

我有这个 Material 表，它通过 Rest API 显示来自 JSON url 的数据。我现在想在材料表上使用 sort\pagination 但无法通过它。下面是截图。我如何同时提及MatTableDataSource两者UserDataSource？我想坚持使用Observable. 请告知，我是 Angular 的新手。

组件.ts

HTML

服务-data.service.ts

I am using Angular and the MaterialTabs module.

I have a list of tabs in my component that I display using mat-tabs and ngFor, plus one more disabled tab with a plus button. When clicking the plus button, I would like to add a new tab and immediately focus on that tab. (Similarly to how browser tabs work.)

This is how it looks like:

I do this by two-way property-binding to the selectedIndex property of the mat-tab-group and setting it from my component inside the button click event handler.

You can see that the tabgroup's property and the property bound to it is equal, when it works.

However, I ran into a problem, where if I freshly load the page and click on the button first, the property binding somehow breaks:

Clicking once on any of the Tabs seems to fix the issue forever. The issue comes back when you reload the page.

From my understanding the following property binding would make sure that the values will always be equal and if one of them changes the other will follow:

So how can selectedIndex be 1, while selectedIndexBinding is 0?

How can I fix this issue?

Live example:

https://stackblitz.com/edit/angular-82vgrj

Code:

src/app/app.component.html

src/app/app.component.ts

我想更改一个精确的 mat-tab 背景颜色，有这个解决方案可以工作，但比需要的要复杂一些。

我有这个可以工作的当前代码，但我想删除第一个带有 aria-label id 的按钮

HTML：

CSS：

我想要一些更简单的东西，但它不起作用：

谢谢 ！

目前正在处理材料选项卡，我需要根据我的 json 值动态创建选项卡。

这是我的json

选项卡将如下所示。下面的选项卡将采用部门名称

主要 主要 1

这就是我要显示的我正在使用材料选项卡

但是该选项卡未以模式显示方法是否正确，请告诉我