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

angular-material - 如何主题化角材料组件形状?

有没有办法在角材料中主题化组件形状?我知道材料设计有一个形状概念,可以让您为所有小/中/大型组件创建更圆、更圆甚至是切角。有没有办法在角材料中实现它?

如果不是,那么在角材料中全局定制组件的最佳方法是什么?假设我想删除 all 上的圆角<mat-button>

0 投票
4 回答
4350 浏览

angular - Angular 8 - 将所有材料模块导入主应用程序模块是否比在不同模块中导入单个材料模块更好?

将材料模块导入 Angular 8 项目的最佳方法是什么?是不是通过将material.module.ts导入到app主模块,然后在其他模块中使用:

或者干脆在每个模块中导入material的主要使用模块?

例如,如果我只使用mat-cardin ProductsModule,我只需导入MatCardModuleproducts 模块并完成它。

0 投票
4 回答
3650 浏览

angular - 反转 mat-checkbox 的“选中”值

当检查角材料mat-checkboxhttps://material.angular.io/components/checkbox/overview)时,它具有“ true”的值。未选中时,它的值为“false”。

有没有办法扭转这种行为?我需要的正好相反。选中的复选框应在调用时序列化为“false”,未选中的复选框应序列化为“true” this.filterFormGroup.getRawValue()

我希望有这样的事情:

或者我是否需要像这样创建一个自定义指令:

我的目标是这段代码:

{resolved: false}选中复选框时返回。

0 投票
1 回答
164 浏览

angular - 选择项目时,Mat-autocomplete 保留最近的选项

我正在使用mat-autocomplte&displayFn管道async

现在我的问题是,当我从列表中选择选项时,valueChange将调用&因为我正在使用 displayFn 值将是对象,因此else将执行块returns of(null)

我想要做的是在焦点/点击自动完成时显示以前返回/现有的列表。

因此,当我选择选项时,列表不应该变得清晰。

我不知道该怎么做。谁能指出我正确的方向?

0 投票
0 回答
1136 浏览

angular - 角度材料垫菜单未显示其他组件中的开始操作

在我的 App 组件中,我使用

然后使用路由显示来自其他组件的页面

我的菜单工作正常,当我在其他组件中调用函数时,它没有显示更多并且控制台中没有错误

0 投票
1 回答
937 浏览

html - 具有固定第一行和第一列的可滚动 html 表格,以及表格单元格内的角度材料控件

我想在不使用 jquery 的情况下实现以下结果:

  1. 两个轴的数据应可滚动的表。
  2. 表格的第一列(表头)和第一行应该是固定的,并且根据输入的数据可以自动调整列的宽度,类似于谷歌电子表格

有效的 XHTML

上图显示了我尝试过的内容,包含表格的元素具有 overflow-x: auto 用于水平滚动,元素具有 style="display:block;height:400px;overflow-y:auto" 用于固定的垂直滚动表头。还有一些元素包含垫元素

以下是上图的 html 代码:

预期结果:

有效的 XHTML

任何帮助是极大的赞赏。

0 投票
1 回答
1151 浏览

css - mat-toolbar 中的自定义主题排版

我正在为我的应用程序定义颜色和排版。但它不适用于基于 mat-toolbar 的应用程序标题组件中的标题。默认情况下,我的主题被覆盖.mat-toolbar h1

索引.html

_theme.scss 文件:

topbar.component.html

字体家族正在工作......但我希望<h1 class="topbar__logo mat-headline">App Title</h1>有css:

相反,它具有默认样式:css:

如何让所有 Angular Material 组件(包括 mat-toolbar)使用我自己的主题?

0 投票
0 回答
942 浏览

angular - 如何实现对角材料垫扩展面板的延迟加载?在 mat-accordion 中加载扩展面板的数量时

我需要实现延迟渲染mat-expansion-panel,而不是实现matExpansionPanelContent 我有数千条记录并且我在其中显示它mat-expansion-panel,我需要mat-expansion-panel首先使用延迟渲染加载我需要在向下滚动时加载一些记录集,例如 15它应该呈现下一组记录。

问题是加载 1000 条 od 记录需要超过 1 分钟

我有一个 ngfor,它可以拥有超过 1000 条记录。

实际结果应该加载一组,mat-expansion-panel并且在滚动时它应该呈现下一组mat-expansion-panel

0 投票
2 回答
2550 浏览

angular - 如何测试该组件模板包含 mat-error

我想为检查是否显示 mat-error 的组件创建测试。

我创建了一个测试,但它失败了,因为 DOM 在测试期间根本没有 mat-error。尽管在提供项目时它工作正常。

模板片段

测试设置

0 投票
2 回答
307 浏览

scroll - Ionic 4 + 水平滚动 + ion-split-pane 导致 Angular Material 的拖放错误

在我的 Ionic 4 应用程序中有一个离子拆分窗格。在 ion-split-pane 里面有一个 ion-router-outlet 我的 ionic 页面。

在页面内部,我们尝试使用列实现看板。我们正在尝试实现使用拖放在列之间移动元素的能力。

但是当有水平滚动时,在里面的列的地方,我们不能放下它。

我们正在使用 Angular Material 的拖放功能。

我们如何在离子拆分窗格的滚动窗格内实现拖放?