问题标签 [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 回答
1391 浏览

angular - 两个垂直和水平选项卡 - 不工作垫选项卡

我能够使用下面的代码创建垂直材料选项卡,但我想要在垂直选项卡内我需要一个水平选项卡

当我尝试使用下面的代码都显示在垂直选项卡中时,这是我的代码,这是我的 Stackblitz url。

这是stackblitz 链接

0 投票
1 回答
400 浏览

angular - 基于垫选项卡单击垫展开折叠应显示

我目前正在一个组件中的 Mat 选项卡(垂直)和 Mat 扩展折叠在其他组件中基于单击 mat 选项卡相关的 Mat 展开应该显示。

这是我正在研究的Stackblitz 。

0 投票
1 回答
2397 浏览

angular - 选择时在 mat-tab 中加载功能 - 使用 mat-tab-group 的 Angular 2 材料

选择后如何向 mat-tab添加操作

就我而言,我想设置laodCard=true选择卡的时间。

这是我写的代码,但操作(click)不起作用

0 投票
1 回答
266 浏览

angular - 选项卡未按预期方式工作 - Angular Material

我只是想学习角度。我正在使用 Angular 8 和最新材料。我正在分享我的dashboard.components.html

AppRoutingModule.ts

这里的问题是当我单击标签页时正在加载但标签屏幕消失了。我希望 Nab bar 选项卡应该一直存在。在该选项卡导航栏的正下方,页面应该被加载。这里没有发生。我一直都必须点击后退按钮。谁能告诉我我在这里缺少什么。

0 投票
1 回答
469 浏览

css - Angular / CSS onload如何使默认选项卡处于活动状态

我正在创建一个使用mat-tab-nav-barmat-tab-link的角度页面。

dashborad.component.html

应用路由模块

除了一件事,我可以随心所欲地获取页面。加载页面时,它显示默认页面,但选项卡未显示为选中状态。当我单击一个选项卡时,它会变为活动状态并显示相同的页面。所以想知道如何实现要求。

0 投票
1 回答
363 浏览

angular - 在 Angular 9 中动态加载 *ngFor 内的组件

我研究了 angular.io 上可用的代码,并在我的场景中使用mat-tab-group. 但是,我希望能够在*ngFor. 我试过了,指令总是undefined.

我在这里搜索,虽然有几个问题可以解决这个问题,但我没有找到关于如何做到这一点的明确示例。这个想法是我有一个mat-tab-group由几个组成的mat-tabs,它们是通过一个*ngFor指令加载的。在每个选项卡中,我想根据所选索引显示不同的组件。有什么办法可以做到这一点?

是我修改后的 stackblitz:正如你this.adHost is undefined在控制台中看到的那样。

0 投票
1 回答
1022 浏览

angular - Angular MatTabChangeEvent 不会在页面加载时触发

我正在使用(selectedChange)="functionName($event)"来获取我的活动标签的索引。但是,在页面加载时,我无法触发此事件,因为它仅在我更改选项卡至少一次以获取MatTabChangeEvent包含两个对象tabindex.

在两个选项卡中,我都有一个带分页的垫表。还有一个搜索栏,可以从数据库中搜索数据并将其显示在各自的选项卡中,但对我来说,问题是如果在页面加载时用户直接进入搜索栏,那么我将不知道哪个选项卡当前处于活动状态,所以我的条件语句是根据用户搜索在各自的选项卡中显示数据将给出不存在Uncaught error的值。this.activeTab.index但是一旦用户实际更改了选项卡,那么我就有了活动选项卡索引值,并且我的代码可以正常工作。

那么我怎样才能在页面加载时获得 MatTabChangeObject 呢?

注意:我不能使用MatGroupwithViewChild因为它不会MatTabChangeEvent像对象一样返回我

这是我的代码

我在函数中发出 eventChange 值,然后将该值分配给this.tabEvent类型为MatTabChangeEvent

0 投票
1 回答
2844 浏览

css - 将通知徽章添加到 mat-tab

我正在尝试将通知徽章添加到类似于下图的 mat-tab 中,

选项卡右上角的通知徽章

但我似乎无法在有角材料标签上找到一种方法。因为徽章被剪掉了。

这是一个 stackblitz 示例:https ://stackblitz.com/edit/angular-eqlmkb-zzkrtg

有办法吗?

0 投票
2 回答
1272 浏览

angular - Angular 9 mat-tab 无法使用父子通信

我对 Angular 比较陌生。我试图使用 @Input() 将数据从父组件传递到子组件,但未反映更改。我有一个带有选择元素的父组件,我想将所选项目的值传递给孩子。父组件有一个带有几个 mat-tab(s) 的 mat-tab-group。

父 HTML

家长 TS

子 HTML

儿童 TS

我看到的是,当我在父组件中更改我的选择时,classId 没有传达给子组件,我应该手动刷新组件以使更改得到反映吗?
非常感谢任何帮助...
TIA

0 投票
2 回答
2411 浏览

javascript - 我对 angular 9 mat-tab-group 有疑问

我有角度材质选项卡的问题,我的项目是角度 9。我在其中创建了名为 account 的子模块 我创建了名为 account-layout 的组件

这是 account-layout.component.html

还有这个 account-layout.component.ts

这是 account.module.ts

现在,我有这个错误错误 NG8001: 'mat-tab-group' is not a known element: 1. 如果 'mat-tab-group' 是一个 Angular 组件,那么验证它是这个模块的一部分。

请帮助我谢谢。