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

javascript - 使用验证在一行中动态添加行和可编辑字段的 mat 表

我刚刚开始研究 Angular 反应式表单,我正在尝试构建一个表单内的表。

该表通过单击添加了新功能,新的空行将插入到表中。默认情况下,现有行将处于编辑模式并经过验证。表格数据将使用单个保存按钮保存,该按钮不在表格中但在表格内。我尝试了下面的代码

但我收到此错误 this.validator is not a function

0 投票
3 回答
2501 浏览

angular - 在页面加载时将默认值放在垫选择下拉列表中

我创建了一个表单,我正在使用角度材料,我可以成功获取并设置文本字段或 textarea 字段中的值,但无法在下拉列表中输入值,我有两个 json 数据。第一个将填充下拉列表,然后第二个将设置下拉列表的值。所以 onload 页面我必须在未设置的下拉列表中显示该值

不知道以某种方式我无法将默认值设置为下拉 Onload。太感谢了。顺便说一句,今天是我的生日,所以别忘了祝福我。哈哈

0 投票
1 回答
31 浏览

angular-reactive-forms - 表单提交成功后出现验证错误

我正在使用 angular 8 和 angular material 7。我正在使用响应式表单来创建和提交表单。提交表单后,我正在以编程方式重置表单并标记为 untouchewd。但是在每次提交之后,我看到所有的验证都在触发和红色

for 的 HTML 模板非常简单,如下所示:

0 投票
1 回答
298 浏览

angular - 带有取消图标的 matChip 无法移除并以不同方式显示

实际:无法移除芯片 预期:点击 x 即可移除芯片

我做了以下动作:

  1. 在主 app.module 中导入 MatIconModule 和 MatChipsModule。带有我的代码的模块是子模块/延迟加载。我还需要在子组件中导入 MatIconModule 才能使图标正常工作。

从“@angular/material/chips”导入 { MatChipsModule };

  1. 在 index.html 中添加了以下内容

链接 href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"

  1. 在 style.css 中添加了 ff 并更新了 angular.json 文件。

@import "@angular/material/prebuilt-themes/indigo-pink.css";

"styles": [ "src/assets/css/style.css"] //angular.json

  1. 安装锤
0 投票
1 回答
31 浏览

css - 区域填充到所有容器区域的宽度

我有这种情况:

在此处输入图像描述

在左边我有一棵树和我的公司,在右边有一个带有 div 的 DIV,我将绘制我的 matCard(角度材料)。

我希望 MyCard div 可以用 30px 的边距填充所有内容。

如果我设置两张 matCard,第二张将在 MyCard 下,它们之间有 30px 的边距。

我如何使用 CSS 来做到这一点?用 30px 的边距将 MyCArd 填充到所有 myMainDi v。如果我更改宽度长度,该卡会自动更改。Thx

0 投票
1 回答
854 浏览

angular - 使用来自 Parent 的 ViewChild 访问嵌套在 ngTemplate 中的组件

你怎么知道延迟加载的组件是否已经被渲染?我有以下 HTML:

默认情况下,面板是关闭的,因此<some-component>尚未渲染。

然后在打字稿中我有以下代码:

假设面板尚未打开并且用户单击按钮我收到以下错误:

我知道这是因为实际组件尚未加载,我们正在尝试调用它的函数。我想保持延迟加载面板以减少在角材料扩展面板中具有动态事物的性能问题。

我只能想到一个解决方案,它不是延迟加载,这不是一个真正的选择。还有其他解决方案吗?有没有办法知道 ViewChild 是否未定义,或者是否有一个标志 viewChild 会告诉你它是否找到了这些组件?

0 投票
1 回答
769 浏览

drag-and-drop - 使用捏缩放拖放无法按预期工作

在捏合缩放的缩放模式下,拖动无法与鼠标指针正确对齐。

我在这里详细说明了问题:https ://stackblitz.com/edit/angular-t7hwqg

无论缩放如何,我都希望拖动以相同的方式工作。我在角度材料的版本 8 中看到他们添加了 @Input('cdkDragConstrainPosition') constrainPosition: (point: Point, dragRef: DragRef) => Point,这将解决我的问题,因为在缩放模式下我可以编写自定义逻辑用指针正确映射拖动,但我无法升级到版本 8,因为应用程序的其他部分使用版本 7。

那么,如果有人可以建议可以做什么?可以以某种方式修改拖动并考虑当前的缩放量,或者如果我可以从材料版本 8 中获取“cdkDragConstrainPosition”并集成到我当前的包中。

0 投票
1 回答
85 浏览

angular-material-7 - 为什么 mat-sort 在我的 mat-table 上不起作用

我在一页上使用多个垫表。我需要一张桌子的垫子排序。

当我调试代码响应时得到结果但 matSort 不起作用

'

我没有收到任何控制台错误。

0 投票
2 回答
4676 浏览

css - 将 traingle 放在垫子菜单的顶部

我的菜单如下。我如何将一个三角形向上放到我的下拉菜单中。

当前外观

在此处输入图像描述

我想

在此处输入图像描述

我在 div 中添加了以下 css 和封闭的 mat-menu 与 css 但不工作。

0 投票
1 回答
1248 浏览

angular - mat-table 以编程方式跳到特定行

我正在通过角材料的垫表组件实现表格。当我的代码中的某些事件触发时,我想跳到特定的行。

到目前为止,我尝试使用 (focus)on row 和 virtual scrolling 事件。

但我认为我错过了一些东西,它应该比这更简单。