Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用,经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material,即旧版AngularJS框架的Material Design实现。
嘿,大家好,我面临着一个问题,即 Angular 材质按钮的颜色在某些情况下适用于机器人,就像这样: html: 大家好,我面临着一个问题,即在某些情况下机器人会应用 Angular 材质按钮的颜色,就像这样: html: <mat-card> <mat-spinner *ngIf="isLoading"></mat-spinner> <form [formGroup]="form" (submit)="onLogin()" *ngIf="!isLoading"> <mat-form-field> <input matInput type="email" formControlName="email" placeholder="Email"> <mat-error *ngIf="form.get('email').invalid">Please enter a valid email.</mat-error> </mat-form-field> <mat-form-field> <input matInput type="password" formControlName="password" placeholder="Password"> <mat-error *ngIf="form.get('password').invalid">Please enter a valid password.</mat-error> </mat-form-field> <mat-action-row> <!-- NOT COLORED--> <button mat-raised-button type="submit" color="warn">Login</button> </mat-action-row> </form> <!-- COLORED--> <button mat-raised-button type="submit" color="warn">Login</button> </mat-card> 结果: 如您所见,两个按钮都有相同的代码,但其中一个按钮应用了颜色,而另一个则没有,我想在表单中使用该颜色...有什么解决方案吗? 我在 mat-select 和 mat-options 组件上也遇到了类似的问题。我知道这篇文章已经过时了,但这仍然是一个常见问题。有时,当您向材质组件添加样式时,它不起作用。 对我来说,我设法通过将与材质相关的样式移动到全局样式表来使其工作。这似乎始终有效。 这个.form------ 没有这样的问题,我没有抓住洛斯坎比奥斯。 Aun sigo con el Problema 10 2024 通过添加解决问题: this.form = this.fb.group({ email: ['', [Validators.required]], password: ['', [Validators.required]] }); 在 compponent.ts 文件中
我正在尝试增加材质复选框的大小。 变换似乎增加了材质复选框的大小。但是,我不确定这是否是实现这一目标的正确方法? CSS ::ng...
我在使用角度材料的角度项目中有以下用户名密码形式。我想要的是浏览器(使用 Google Chrome 进行测试),向我建议我所使用的用户名列表...
如何更改 mat-mdc-form-field外观=“outline”的背景颜色
由于某种原因,无法找到如何在概述表单字段时覆盖背景颜色的工作示例,所有示例都适用于填充
在过去的几个月里,我一直在开发 Angular 17 应用程序(仅使用一种语言),当我将其构建用于生产时,我注意到生成了一些“块”文件。 经过一些
我正在使用 Angular 17(CLI 版本:17.1.0)和 Angular Material 版本 17.3.10。我的项目中禁用了独立组件设置。导入后,我在组件中使用垫滑块
如何在 mat-form-field Angular Material 中使用 2 个输入并分别聚焦?
我在一个垫子表单字段中有 2 个输入。 我的问题是,当我单击第二个输入时,焦点自动放在第一个输入上,我不想转到第一个输入。 可以请你...
使用 <router-outlet> 延迟加载 mat-tab 内容时,在 mat-tab 内容中,路由组件会初始化两次(构造函数和 Init)
我创建了一个 mat 选项卡组,并使用 ng-for 使用路由器出口加载选项卡,当我添加新选项卡并导航 url 时,我的新路由组件被构造两次,之前的选项卡内容被重复...
我有这样的数据: 常量列表:数组 = [ { id: 1, 名称: 'somename' } ... ] 然后 html 看起来像这样: 我有这样的数据: const List: Array<Item> = [ { id: 1, name: 'somename' } ... ] 然后 html 看起来像这样: <ng-container *ngFor="let item of list; let i = index;"> <div class="grid"> <mat-checkbox *ngIf="item.id > 4;" #{{item.name}} value="false" type="checkbox"> </mat-checkbox> <mat-form-field *ngIf="item.id <= 4"> <input formControlName="{{item.somename}}" matInput value="" type="number"/> </mat-form-field> <mat-form-field *ngIf="item.id > 4 && item.name.checked"> <input formControlName="{{item.name}}" matInput value="" type="number"/> </mat-form-field> </div> </ng-container> NgFor 迭代数组并创建 mat-checkbox 和 mat-form-field。 数组中的每个项目都有表单字段,但只有某些表单字段项目会被选中。 未获得复选框的表单字段始终可见。 获取复选框的表单字段仅在选中相应的复选框后才可见。 我的问题是如何在复选框为 checked 后显示表单字段? #{{item.name.checked}}绑定不起作用 当您在*ngFor(或@for)内使用模板引用变量时,“范围”与此循环相关 这是什么意思?您使用“相同”变量名称(在代码中checkBoxId) <ng-container *ngFor="let item of list; let i = index;"> <div class="grid"> <mat-checkbox *ngIf="item.id > 4;" #checkBoxId value="false" type="checkbox"> </mat-checkbox> <!-- you can use---> {{checkboxId.checked}} <mat-form-field *ngIf="item.id > 4 && checkBoxId.checked"> <input formControlName="{{item.name}}" matInput type="number"/> </mat-form-field> </ng-container> 注意:当您使用 ReactiveFormsControls 时不使用“值”,只需为 formControl 赋予值即可。
我按照这个例子来实现角度材料表。 https://stackblitz.com/angular/jejeknenmgr?file=src%2Fapp%2Ftable-basic-example.ts 在这里,我使用...
我正在关注以下文档 https://material.angular.io/guide/theming#defining-a-theme // 来自文档 $主题:mat.define-theme(( 排版:( 品牌系列:“Open Sans”, ...
我在 IE 上使用角度材料时遇到这些问题(我正在使用最新版本的边缘,其他版本的结果相同(9,10,11) 文本在 div 标签外部流动 以下是
如何将二级或三级颜色应用于具有 M3 主题的 Angular Material 组件?
我目前正在发现具有 M3 主题规范的 Angular Material v18+。使用我在文档中找到的以下示意图,我生成了一个自定义主题,包括自定义...
CDK 虚拟滚动问题 maxBufferPx 未显示完整列表
我正在为一个大列表实现 CDK 虚拟滚动,虽然仅使用 minBufferPx 即可顺利滚动,但在添加 maxBufferPx 时遇到问题。如果没有它,我会收到此控制台错误: 呃...
单击任何菜单项时菜单会关闭,但要求是,如果单击项目菜单应打开
参考:https://material.angular.io/cdk/menu/examples Angular cdk 菜单在单击任何菜单项时关闭,但要求是,如果单击项目菜单应打开,并且应在单击我之外时关闭...
Angular Material - 如何在循环中对 mat-table 的数据进行排序
我正在循环内显示垫表。记录显示正确,并且还显示排序箭头。我使用过 MatSort 但它不起作用。谁能帮我看看我在哪里
如何限制用户打开后续的手风琴,直到当前手风琴中的表单在 Angular Material 中有效?
我有一个要求,我在扩展面板中有表单,并且只有在填写当前手风琴中的表单后,我需要允许用户导航到后续的手风琴。 例如,如果
如何在 Angular Material Design 中更改 Sidenav 的宽度?
无论我使用什么屏幕尺寸,Sidenav 始终是相同的尺寸。我尝试添加属性,例如 - 弯曲 - flex="85" (获取其容器的 85%) 似乎找不到好的方法。
如何将 matButton 设置为活动(聚焦)Angular?
当用户第一次和下次进入页面时,放置的按钮不会聚焦并以灰色突出显示。我尝试设置自动对焦: {{' 当用户第一次和下次进入页面时,放置的按钮不会聚焦并以灰色突出显示。我尝试设置自动对焦: <button mat-raised-button color="primary" autofocus>{{'recovery' | translate}}</button> 我认为这是 Material 按钮的缺陷。 如何在最后的 Angular 中设置聚焦材质按钮? 您可以将焦点设置到组件生命周期钩子ngAfterViewInit处的按钮,例如: 模板 <button mat-raised-button color="primary" #btnRef="matButton">{{'recovery' | translate}}</button> Ts 文件 ... @ViewChild('btnRef') buttonRef: MatButton; ... ngAfterViewInit() { this.buttonRef.focus(); } ... 希望有帮助。 看起来有角材料已经有这方面的指令。检查Angular A11y <button mat-button cdkFocusInitial>Ok</button> <button mat-button #btnFocus=matButton [autofocus]="btnFocus.focus()">Post</button> 您可以使用MatButton的focus方法。 <button mat-raised-button #button>{{ 'recovery' | translate }}</button> @ViewChild('button') button; ngOnInit() { this.button.focus() } 添加一个简单的 autofocus 指令 autofocus 属性的问题在于它具有以下行为(请参阅 此处完整源代码,了解 MDN 上关于 autofocus 的更多信息): autofocus 全局属性是一个布尔属性,指示元素应集中在页面加载时,或者当显示其所属的 <dialog> 时。 因此,如果您的按钮或输入元素稍后渲染,自动对焦将无法按预期工作。 您可以通过将现有属性包装在您自己的自定义指令中来轻松更改此行为,该指令在初始化时也将关注该元素。您只需要几行代码;我的看起来像这样并且运行良好: import { AfterViewInit, Directive, ElementRef } from '@angular/core'; // This directive makes autofocus work for form input elements that are rendered after initial page load @Directive({ selector: 'input', }) export class AutoFocusDirective implements AfterViewInit { constructor(public elementRef: ElementRef) { } public ngAfterViewInit(): void { if (this.elementRef.nativeElement.autofocus) { this.elementRef.nativeElement.focus(); } } } 注意: 确保全局加载此指令,或者确保每次您需要此自定义行为时不要忘记在模块中加载该指令,否则您会用头撞墙,想知道为什么它不这样做。不工作... <button mat-raised-button color="primary" #btn [autofocus]="btn.focus()">{{'recovery' | translate}}</button>
当列表项是组件时,Angular Material List 无法正确渲染列表
目标 我试图将格式化逻辑(而不是路由逻辑)封装到组件中。 我正在使用 Angular Material 的 MatList 组件。