angular-material2 相关问题

如何在 Angular Mat-Select 中动态禁用特定选项

我有一个列表，其中一个对象具有 name 和 id 属性： [ { “名称”：“打开”， “id”：“1” }, { “名称”：“进行中”， &...

垫子选择面板最小宽度

我正在尝试使用多个复选框自定义垫选择。 由于某种原因，面板的最小宽度错误，如下所示： 我不知道它在哪里计算这个最小宽度。 我也尝试添加

使用 mat-menu 作为上下文菜单：正确定位

我正在尝试使用 mat-menu 构建一个上下文菜单，我觉得我已经非常接近了。我希望用户右键单击时弹出菜单。问题是它在用户上次访问的位置弹出...

在 Angular2 中显示进度条的最佳方式是什么？

当执行 HTTP 请求时，在 Angular2 应用程序中显示进度条的最佳方式是什么？ 我使用 AngularMaterial2 进度条尝试了以下操作： 当执行 HTTP 请求时，在 Angular2 应用程序中显示进度条的最佳方式是什么？ 我使用 AngularMaterial2 进度条尝试了以下操作： <md-progress-bar mode="determinate" value="myValue"></md-progress-bar> 但是如何找到上述代码的“值”呢？ （如果无法找出HTTP请求的实际进度，实现Youtube或Github风格进度条的最佳方法是什么？） 我们无法确定完成HTTP请求所需的时间，这就是为什么indeterminate模式更适合HTTP请求的进度。 Angular 的 Http 服务返回一个 Observable，我们可以订阅并处理响应，但目前没有可用的机制从 Http 服务获取进度。 一种方法是使用 XmlHttpRequest 监听 progress 事件，如果使用其 lengthComputable 属性，则可以相应地显示进度条。 因此实现 Youtube 或 Github 风格进度条的一种方法是 如本答案所示。 如果您有多个请求，您可以使用已完成请求数的百分比。 使用互联网上广泛提供的公共源代码中的库、模块或包 以下是一些 Angular 2 示例： https://embed.plnkr.co/rx4RJUFjHqGYMA3jRxDL/ http://www.angulartypescript.com/angular-2-progress-bar/

如何设置“未选中”滑动切换组件的颜色？

我可以设置“未选中”滑动切换组件的颜色吗？ 文档仅指定如何设置“已检查”的一项。 在 Slide-toggle-configurable-example.html 模板中： 我可以设置“未选中”滑动切换组件的颜色吗？ 文档仅指定如何设置“选中”一项。 在 Slide-toggle-configurable-example.html 模板中： <md-slide-toggle class="example-margin" [color]="color"> Slide me! </md-slide-toggle> 在 *.ts 文件中： import {Component} from '@angular/core'; @Component({ selector: 'slide-toggle-configurable-example', templateUrl: 'slide-toggle-configurable-example.html', styleUrls: ['slide-toggle-configurable-example.css'], }) export class SlideToggleConfigurableExample { color = 'accent'; checked = false; } 当滑动切换“未选中”时，我真的很想有一些特定的颜色。可以吗？ 为未选中状态设置颜色的唯一可能方法是使用以下规则通过 CSS 设置它： 对于切换栏使用： md-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar { background-color: red; /* set your color here */ } 您还可以根据类型设置不同的颜色： md-slide-toggle.mat-primary:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar { background-color: pink; } md-slide-toggle.mat-accent:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar { background-color: yellow; } 要设置拇指的颜色，请使用： md-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-thumb { background-color: green; } 要设置 mat-slide-toggle 的颜色，您必须将此代码放入 style.scss 文件中 .mat-mdc-slide-toggle .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after { background: #F4760B !important; } .mat-mdc-slide-toggle .mdc-switch:enabled .mdc-switch__track::after { background: #F4760B !important; }

如何在 Angular Material 2 中构建自定义组件

是否有任何标准方法可以在 Angular Material 2 之上构建自己的组件或扩展现有组件。 之前我使用过 Sencha/ExtJS 框架，构建自己的框架非常简单

Angular Material 2：修复多行错误消息

我在我的角度应用程序中使用角度材料2。当我的表单输入字段错误消息超过一行时，我遇到了问题。这是照片： 这是代码： 我在我的角度应用程序中使用角度材料 2。当我的表单输入字段错误消息超过一行时，我遇到了问题。这是照片： 这是代码： <md-error *ngIf="password.touched && password.invalid"> <span *ngIf="password.errors.required"> {{'PASSWORD_RECOVERY.FIELD_REQUIRED' | translate}} </span> <span *ngIf="password.errors.minlength || password.errors.maxlength"> {{'PASSWORD_RECOVERY.PASSWORD_LENGTH' | translate}} </span> <span *ngIf="password.errors.pattern"> {{'PASSWORD_RECOVERY.FOR_A_SECURE_PASSWORD' | translate}} </span> </md-error> 我通过阅读 github 了解到，这是 Angular 2 材料中的一个错误。有人通过自定义解决方法成功解决了这个问题吗？ 问题是类为 .mat-form-field-subscript-wrapper 的元素是 position: absolute，所以它不占用实际空间。 按照 xumepadismal 在 github 上关于此问题的建议，您可以添加此 scss 作为解决我的问题的解决方法： // Workaround for https://github.com/angular/material2/issues/4580. mat-form-field .mat-form-field { &-underline { position: relative; bottom: auto; } &-subscript-wrapper { position: static; } } 它会转换静态 div 中的 .mat-form-field-subscript-wrapper 节点，并将 .mat-form-field-unterline 重新定位在输入字段之后。 正如材料 15 中在 github 讨论中提到的，可以通过将 subscriptSizing="dynamic" 添加到 mat-form-field 来解决问题。 要更改默认行为，您必须使用以下选项更新 angular.module.ts 提供程序： providers: [ { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } } ] 这也可以在材料文档中找到 使用@mattia.corci提出的解决方案会导致错误消息被推到底部太多，从而在顶部留下不必要的空白空间。 使用 Tailwind CSS，这个解决方案对我来说适用于最新的 Angular 17： .mat-mdc-form-field { @apply w-full self-start; .mat-mdc-form-field-subscript-wrapper { @apply flex; .mat-mdc-form-field-error-wrapper { @apply static; } } } mat-form-field.ng-invalid.ng-touched { animation: example; animation-duration: 0.3s; margin-bottom: 20px; } @keyframes example { from { margin-bottom: 0; } to { margin-bottom: 20px; } } 它对我有用。

SASS-Loader 中的分号错误：“Angular 应用程序中的缩进语法中不允许使用分号

我的 Angular 项目面临一个问题，其中 SASS 文件在使用 SASS-Loader 编译期间生成错误。错误消息具体指出： 模块构建失败（来自 ./node_m...

如何在 Angular Material 的自定义主题中设置背景调色板？

我目前定义了一个自定义主题，其结尾如下： $my-material-theme: mat.define-light-theme(( 颜色： （ 主要：$my-material-primary， 口音：$我的材料口音， ...

Angular Material 2 - 禁用波纹？

我目前正在使用 md-tab-group （昨天刚刚更新到最新版本）... 有人知道吗 是否可以在现有组件上禁用/配置 Ripple（此中的 md-tab-group ...

材质对话框弹出空白，然后显示字母

我在电子应用程序中使用角度 9.1.13 和材料 9.2.4。我注意到有关材质对话框组件的以下奇怪行为。 当我尝试弹出一个简单的对话框时

滑动时垫滑块值未更新

滑动时垫滑块值不会同步更新。 {{我的值}} 它只是在发布 sl 后才更新...

当原点具有 *ngIf

添加_...

Mat-form-field 不起作用

我使用 Material Angular 制作了一张桌子。添加了排序和分页。但是，当我想添加一个用于过滤的表单时，一切都会失败，最终什么也不起作用。我可能做错了什么？

我可以在 Angular / Angular Material 中以编程方式移动 mat-horizontal-stepper 的步骤吗

我有一个关于 Angular Material（Angular 4+）的问题。假设在我的组件模板中我添加了一个 组件，并且在每个步骤中 我有步进器，但是...

MatIconModule 导入/导出

我正在使用 Angular Material 开发 Angular 4 项目。 我有这个屏幕，其中曾经有材质卡和材质图标。 我只是处理 MatCardModule 的导入/导出。这张卡是

如何在 Angular 中正确的验证 Satet 中获取 ControlValueAccessor 中的内部控件

我们开始为 Angular（目前版本 12）项目实现组件库。 目前我们将第一个组件作为蓝图实现。该组件应该封装...

材料 2 表单控件选择不适用于异步源

我正在使用 Material 2.0.0-beta.12 运行 Angular 4.3.4，并且在尝试创建 mat-select 以从异步源生成动态 mat-option 列表时遇到问题。我得到的只是

有角材料。鼠标悬停时突出显示表格行

我们正在为我们的应用程序使用 Angular Material 表： https://material.angular.io/components/table/overview 你可以吗

角度材质主题/更改边框半径

我正在使用带有主题的 Angular Material。 $我的主题红色：（... $我的主题红色：（... $我的主题塞莱斯特：（... $my-theme-primary: mat-palette($my-theme-redish); $my-theme-accent: mat-palette($my-th...