问题标签 [mat-tab]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
350 浏览

angular - 重新加载时 Mat-tab 不在底层

我正在使用mat-tab材料设计,Angular。当我单击一个选项卡时,它会变成active并带有下划线

在此处输入图像描述

但是,当我在浏览器上重新加载页面时,active属性仍然存在true,但底层没有出现

在此处输入图像描述

有谁知道如何解决这个问题?

HTML

TS

0 投票
1 回答
219 浏览

angular - 有没有办法为每个 mat-tab 设置不同的下划线颜色?

我有材料角垫选项卡组件,我想为每个垫子选项卡设置不同的下划线颜色,我尝试使用 backgroundColor 和 selectedTabChange 属性,但我无法管理

0 投票
2 回答
874 浏览

angular - Angular mat-tab:仅加载初始选定选项卡的内容

我正在使用 mat-tab 来显示图表。

每个图表都是使用查询选择器创建的:

在我的组件中,我有一个选项卡列表:

对于每个选项卡,我创建一个图表:

在我的 html 中,我试图像这样显示每个选项卡的图表:

问题是只显示初始选定选项卡的图表。

你能帮我吗?谢谢你。

0 投票
1 回答
1284 浏览

angular - Angular mat-tab 从另一个类返回到第一个选项卡

mat-tab-group用来创建两个选项卡,然后链接到其他组件:

app-notification-account组件上,我有一个取消按钮,单击该按钮时,我想返回第一个选项卡。如何从不同的组件类导航回第一个选项卡?

在此处输入图像描述

0 投票
1 回答
146 浏览

css - ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。在 mat-tab-group 上使用 Ngclass

所以我想让相同的mat-ink-bar颜色具有不同的颜色mat-tab-group。我正在使用本地参考和NgClass. 样式按预期工作,但在控制台中,它给了我这个

这是代码:
HTML:

SCSS:

当我浏览 NgClass 上的其他帖子时,似乎真假值也在不断变化,那么我使用的方法为什么会给我这个错误?是因为其他人选择在内部更改变量NgAfterViewChecked还是NgOnChanges正确检测到更改?
谢谢!

0 投票
1 回答
28 浏览

angular-material - 响应即将到来,但请求 api 调用未在 angular9 的网络面板中触发

通过 promise 或 observable 生成的请求 api 有时响应即将到来,但请求 api 调用未在 chrome 网络面板中触发。响应也得到错误的例子:this.getTimeCollections().then(data=>{console.log(data)});

//在service.ts中

getTimeCollections():承诺{

}

这里第一次它返回正确的数据作为响应,但是如果我们再次调用相同的函数,它会返回我们检查控制台打印但请求未显示网络面板和响应也未更新的数据,它返回以前的数据。在这里,如果我们删除 matTab 选择器,我在此模板中使用了 matTabmodule,那么它工作正常。

0 投票
1 回答
86 浏览

angular - 在同一页面上使用多个组件实例时,如何防止子组件类变量的值被覆盖?

我有一个子组件,它有一个名为emptyMessage. 在ngOnInit()方法中设置了这个变量的值。我在一个父组件中使用同一子组件的多个实例。我发现这emptyMessage将在该页面上的所有子组件实例中获得相同的值。该值由最后一个初始化的子组件确定。我在一个组件中显示这些子mat-tab-group组件。所有子组件实例都加载到一个单独的mat-tab窗口中,并且每个mat-tab窗口的内容都被急切地加载。

我不确定这种行为是由角度本身引起的mat-tab-group还是由角度本身引起的。我知道,在 Java 中,每当您将 a 定义为时class variablestatic该变量及其值都会在由该类创建的所有实例之间共享。如果 Angular 组件的类变量默认是静态的,有没有办法将它们变成实例变量,以便不同的组件实例可以有自己的单独值?

编辑:代码

父组件 HTML

所有 3 个子组件的 emptyMessage 值应该是由最后一个初始化的子组件分配的值,在本例中是child component copy 3mat-tab 中的实例。

0 投票
2 回答
517 浏览

angular-material - Angular Material mat-tabs 都有不同的高度

我希望所有标签都具有相同的高度,无论里面有什么内容。

选项卡位于div. 最好我不需要为此设置固定的高度div,而是div应该具有mat-tab包含最多东西的高度。

还没有发现任何真正有效的方法,如果有人可以提供帮助,那就太好了!

我当前的代码:

HTML:

CSS:

编辑:一些样板示例:

第一个标签:
图1

第二个标签:
图2

查看内容的高度有何不同

0 投票
1 回答
174 浏览

html - 使用 mat-tab 将水平选项卡转换为垂直选项卡

我正在使用 mat-tab-group 水平显示选项卡。在电脑屏幕上看起来没问题。但是在手机屏幕上,看起来就不是很整齐了。如果它的移动尺寸屏幕,有没有办法将它转换为垂直标签列表?

0 投票
0 回答
86 浏览

angular - 在 mat 选项卡中传递给 selectedIndex 的变量值不起作用。仅当直接数字传递给它时它才有效

我想动态地将垫标签添加到垫标签组。数字选项卡仅限于 5 个选项卡,但是当我添加新选项卡时,默认情况下不会选择新创建的选项卡。只有当我直接输入数字时,它才会被选中。但是当我传递数组长度时它不起作用。

HTML 代码:

我已经尝试了所有可能的解决方案。相同的按钮适用于标签内容,但不适用于标签组中的标签标签或标签更改事件。