问题标签 [angular-material-6]

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

angular6 - Angular Material mat-select 不加载初始值

我的 mat-select 组件有问题,一切正常,但他只是在编辑时没有设置初始值......如果我更改为简单的 HTML,一切正常。我做错了什么?

工作正常的 HTML 选择:

未按预期工作的 Angular 材质组件:

使用简单的选择元素时,我看到我的函数 compareFn 有效,但使用 Angular Material 时,'y' 值始终未定义......

有问题的gif:

在此处输入图像描述 我做错了什么?谢谢!

0 投票
1 回答
8102 浏览

javascript - Angular 6 - 循环通过材料扩展面板内的材料表

我有一个问题,我有点迷失了。我有材料扩展面板,其标题是通过循环包含我拥有的数据的变量来填充的,该变量是一个对象数组 - 在该对象数组中,有一个键,其值是扩展面板标题。还有一个键,它的值是另一个对象数组,我想循环通过它来填充每个扩展面板内的材质表。

这是我到目前为止...

标题组.ts:


标题.component.ts:


标题.component.html:


发生的情况是,在每个扩展面板下,它仅显示每个扩展面板下titleGroups.ts中标题的最后一个元素的数据。

我想要的是相应的扩展面板显示正确的数据

第一个标题扩展面板显示一个表格,其中显示:

Info One

Info Two

Info Three

Info Four

第二个标题扩展面板显示一个表格,其中显示:

Package

Package Two

等等。我不知道如何做到这一点 - 任何帮助将不胜感激,谢谢!

0 投票
4 回答
1741 浏览

angular - 带有验证错误的 Angular6 Material 自定义表单字段控件(mat-error)

如何制作一个 Material 自定义表单字段控件(例如这个)以支持表单验证并使用 mat-error 显示它们?我知道常规 matInput 指令使用 ErrorStateMatcher ( doc ),但我不明白如何将它与自定义表单字段链接。

0 投票
1 回答
3609 浏览

angular-material - multiTemplateDataRows,错误只有一个默认行没有when谓词函数

我已将 multiTemplateDataRows 添加到我的 <mat-table multiTemplateDataRows>

并具有以下行:

但我仍然收到错误“只有一个默认行没有 when 谓词函数。”

0 投票
1 回答
3000 浏览

angular - 如何验证具有材料形式字段的角度形式?

我有一个使用 Angular 材料表单字段的表单。我想禁用提交按钮,直到所有表单控件都填充了适当的值。(代码在描述中作为链接给出)

当我在模板(代码)中使用材质组件并在组件中定义控件(代码)时,这就是输出。 行

问题

当我在templatecomponent中实现 formsBuilder 或 forms group 时,材料组件将无法正确显示。

在此处输入图像描述

问题

仅当所有材料表单字段都被评估为 true时,我如何才能禁用/启用提交按钮

提前致谢。

0 投票
3 回答
24155 浏览

typescript - 如何在角度 6 的 mat-nav-list 中设置活动项目的颜色

我是 angular 6 的新手,这里有一个带有 mat-sidenav 的垫子工具栏。一切正常,但我想为侧导航菜单中的活动项目设置颜色。

目前我有黑色背景,当我在 mat-nav-list 中选择项目时,我想设置一种颜色,并且我尝试在每个也不起作用的项目之间设置 mat-divider。

app.component.html

谁能帮我解决这个问题。

0 投票
2 回答
392 浏览

typescript - 使用 MatTableDataSource 未在 mat-table 中显示远程数据源

我正在尝试mat-table使用dataSource远程服务器实现一个组件。但数据在表中不可见。

html

ts

但是,如果我dataSource直接更改为has喜欢[dataSource]="has"的数据是可见的,但其他功能,如pagination, sort, filter.

在 App Module 中,MatTableModule, MatPaginatorModule, MatSortModule这些是导入和导出

0 投票
1 回答
692 浏览

angular - MatSelectModule 样式无法正常工作 Angular 6

我是角度(6)的新手。我在表单中使用了 MatSelectModule。它工作正常,但它的风格很奇怪,就像选项放在页面底部的某个地方一样。我已经尝试过这种方式,但失败了。帮我找出原因。这里有一些行,你需要分析。谢谢你。

在 XYZ.component.html

在 XYZ.component.ts

在 app.component.ts

0 投票
0 回答
210 浏览

angular6 - 使用 Angular 6 的 Angular Material Forms 时没有 ControlContainer 错误的提供者

我已经使用 Angular 6 编写了一个应用程序,并且正在向其中添加 Angular 材料。

在现有应用程序中使用反应式表单方法

我有一个具有以下声明的登录模块。

登录组件具有以下模板 -login.component.html

AppModule导入其中LoginModule

login.html渲染时出现控制台错误

当我添加如下时FormsModule,​​此错误已解决LoginModule

是否FormsModule需要添加 Angular 材料表格才能工作?

但是如果我们在我的示例应用程序中使用响应式表单呢?

0 投票
1 回答
1450 浏览

angular - 禁用 Angular Meterial Stepper 组件的“波纹”效果(单击选项卡时)

我有一个使用 Angular Material Stepper 组件的应用程序。

<mat-horizontal-stepper>

如何在没有 CSS-hacks 的情况下禁用逐步点击选项卡上的“涟漪”行为?

谢谢!