问题标签 [angular-material-7]

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 回答
1928 浏览

angular - MatTabNavBar 不显示箭头

我注意到,如果容器对于选项卡而言太小,则在显示箭头时,MatTabNavBar 的行为与常规的 MatTabGroup 不同。

我使用官方文档构建了 MatTabNavBar 和 MatTabGroup,但是您可以在这里看到 MatTabGroup 显示箭头而 MatTabNavBar 没有。

https://angular-gaio5u.stackblitz.io

用于 MatTabGroup 的模板:

用于 MatTabNavBar 的模板:

......所以我错过了什么?!预期结果是显示与 MatTabGroup 相同的箭头的 MatTabNavBar。

0 投票
2 回答
2005 浏览

angular - 如何在 Angular Material Datatable 插值中使用三元表达式来显示 html

我的项目中有一个 Angular Material Datatable 设置。我的项目使用多个表格来显示各种数据源(客户、提供者、学员、公司),因此我的目标是在组件中使用一个数据表,并从给定的服务中动态传递数据、列等。

我的专栏是这样的

所以这一块动态地构建了完整的表格内容。您注意到我在最后有选项列。数据源中不存在此字段,它用于容纳按钮组,因此我可以提供删除或编辑相应行等功能。

我不能在“mat-cell”元素上使用结构指令,因为它已经具有 *matCellDef 属性。所以我想我可以在插值大括号中编写一个简单的三元表达式来检查该列是否具有“选项”列标题并为我的按钮切换出可能的数据。

但是在我打开模板文字以编写按钮并在屏幕上呈现时,我的 IDE 立即抱怨“未关闭的字符串文字”,它没有给出任何错误,但会使我的表变得一团糟

不稳定的表

但是,如果我不从三元组返回任何 HTML 元素,我不会收到任何错误,并且表格会按我的预期执行

期望的结果

我还尝试从三元组中调用一个函数,该函数将 html 返回到模板中,但它被转义了。

谁能建议我如何在通过我的三元条件的行中呈现按钮?

TIA

0 投票
2 回答
5050 浏览

angular - Angular 7 材质扩展面板闪烁

我升级到 Angular 7.1.0:

我正在使用 Angular 材质扩展面板,它们最初通过 [expanded]="false" 扩展为 false。

扩展面板的主体在几毫秒内可见。它看起来像是从扩展到不扩展的短暂跳跃。有没有人有同样的问题?

0 投票
2 回答
10974 浏览

angular - 如何在 AngularMaterial-7 中的 Sidenav 工具栏下方显示滚动条

在此处输入图像描述请帮我实现以下两种方法:

1)如何在sidenav工具栏下方显示sidenav滚动条

2)还有如何仅当我们将鼠标光标移动到侧面导航时才显示滚动条。

提前致谢。!

0 投票
1 回答
876 浏览

jspdf - 如何从使用角度材料 7 虚拟滚动创建的表格中创建 pdf

我想创建一个非常大的 html 表的 pdf。

我使用 Angular Material 7 虚拟滚动来创建该表。

这是html模板代码:

这是负责创建 pdf 的组件函数:

问题是仅(01)创建了少于 30 行的一页,其余行保持不变。

那么,这种情况是因为我使用虚拟滚动来呈现表格吗?

我该怎么做才能将我的所有表格都转换为 pdf?

0 投票
2 回答
7640 浏览

angular - 如何在 mat-list-option (mat-selection-list) 项中添加辅助操作

如何在 mat-list-option 元素内的 mat-selection-list 中添加辅助操作(mat-icon-button)。

目前所有项目都添加到 mat-list-text div 中。

示例(https://stackblitz.com/edit/angular-dwac7y):

0 投票
2 回答
4032 浏览

angular - 如何使用 Angular 材料 7.1.1 在同一页面上实现多个芯片自动完成?

我正在使用 Angular 6 和 Angular 材料 7.1.1 我正在尝试使用具有自动完成功能的芯片。但问题是,当我选择其中一个选项时,它会应用于所有具有自动完成功能的芯片。

我如何让它仅适用于特定的输入字段?

0 投票
0 回答
1681 浏览

angular - Angular 7 Material Drag&Drop 与 ngFor 用于同一页面上的多个放置目标

我在让多个放置目标用于 Angular 拖放时遇到问题。只有一个源列表和一个目标下拉列表,它工作得很好,这里是代码:

源框:

目标框:

现在我在考虑添加一个 *ngFor 应该可以工作:

...但它没有,它没有将放置容器识别为放置物品的地方。

任何想法如何将一个源连接到多个目标?谢谢你的帮助!!

0 投票
3 回答
8103 浏览

angular-material-7 - 如何将自定义值分配给 mat-checkbox?

我想用 mat-checkbox 附加我的状态字段,并希望以字符串的形式获取值,就像我们在 Material-1 中获取的一样。

我正在寻找ng-true-value="'ACTIVE'" ng-false-value="'INACTIVE'"Material-7 中的替代品。

0 投票
1 回答
493 浏览

angular7 - 非 ngcontent 元素的样式

Angular 为自己的组件添加了没有属性的标签。在 Angular 7 中,选择器/deep/,>>>::ng-deep已被弃用,所以现在我无法访问我在化妆中描述的标签,通过:host():host-context()

原妆:

编译后的妆容:

在某些情况下,我在编译 SCSS 后得到:

但我只想

请问我该怎么办?