Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
如何停止使用 Angular Material 芯片在列表中添加重复值？因此，例如，我想在水果列表中只添加苹果一种，当我添加柠檬时，我也想只添加一种。 ...
是否有一个网站可以将 Angular Material 组件映射到其 CSS 变量？
我想设置 Angular Material 组件的样式并使用 CSS 变量自定义它们。 然而，识别影响所需样式的特定 CSS 变量具有挑战性。 有没有办法
如何解决 Angular 中 ngx-intl-tel-input 的重复国家代码和自动格式化问题？
我在 Angular 项目中使用 ngx-intl-tel-input 库来处理电话号码输入字段。我已经为电话号码字段创建了一个可重用的组件，并且我正在传递来自...的 FormControl
在未触及字段时验证 Angular Material 输入字段的边框颜色
我尝试使用角度材质字段并响应用户输入，例如如果有什么问题，应该指出错误。我已将代码剥离为一小部分，其中只有一个密码...
我想在鼠标悬停和鼠标移出时显示和隐藏 Mat-menu，但是如何防止单击时显示 Mat-menu？ 超文本标记语言 我想在鼠标悬停和鼠标移开时显示和隐藏 Mat-menu，但如何防止单击时显示 Mat-menu？ HTML <button mat-mini-fab color="primary" [matMenuTriggerFor]="menu" (mouseenter)="openMenu()"> <img class="face" *ngIf="isLoginIn()" [src]="faceUrl"> </button> <mat-menu #menu="matMenu"> <div (mouseleave)="closeMenu()"> <button class="login-menu-item" mat-flat-button color="primary">Login</button> <button class="login-menu-item" mat-flat-button color="">Logout</button> </div> </mat-menu> 您可以使用 div 而不是按钮，然后您只需要获取对 matMenuTrigger 的模板引用即可调用 mouseenter 和 mouseleave 事件的打开和关闭方法。 <div mat-mini-fab color="primary" #menuTrigger="matMenuTrigger [matMenuTriggerFor]="menu" (mouseenter)="menuTrigger.openMenu()"> <img class="face" *ngIf="isLoginIn()" [src]="faceUrl"> </div> <mat-menu #menu="matMenu"> <div (mouseleave)="menuTrigger.closeMenu()"> <button class="login-menu-item" mat-flat-button color="primary">Login</button> <button class="login-menu-item" mat-flat-button color="">Logout</button> </div> </mat-menu> 修订 看起来像是为 DIV 创建一个包装器 mat-menu 并将 matMenuTrigger 分配给该包装器 DIV 将阻止通过单击顶部 MENU DIV 打开菜单。 <div (mouseenter)="menuTrigger.openMenu()">Menu</div> <div #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu"> <mat-menu #menu="matMenu" > <div (mouseleave)="menuTrigger.closeMenu()"> <button mat-menu-item>Item 1</button> <button mat-menu-item>Item 2</button> </div> </mat-menu> </div> 我也不希望通过单击鼠标打开垫菜单。我想单独以编程方式控制它。 我已经通过应用 css 规则 pointer-events: 'none' 解决了这个问题，它告诉 HtmlElement 在用户与其交互时不要发出点击事件。由于 matMenuTriggerFor 指令监听点击事件，因此它不会打开。 <div [ngStyle]="{cursor: 'pointer'}"> <div [matMenuTriggerFor]="menu" [ngStyle]="{'pointer-events': 'none'}"> <!-- Your Content --> </div> </div> <mat-menu #menu="matMenu"> <button mat-menu-item>Foo<button> <button mat-menu-item>Bar<button> <button mat-menu-item>Baz<button> </mat-menu> 另一种解决方案是，您可以定义一个空跨度为matMenuTriggerFor，然后以编程方式控制菜单“打开、关闭”。 <button (mouseenter)="openMenu()">Test Button</button> <span [matMenuTriggerFor]="menu"></span> <mat-menu #menu="matMenu"> <button mat-menu-item>Foo<button> <button mat-menu-item>Bar<button> <button mat-menu-item>Baz<button> </mat-menu>
Angular 2.0 Material MdDialog 与 Angular 2.0 的工作示例
我正在开发一个 POC 应用程序，我正在尝试让 MdDialog 组件正常工作。有谁有一个可以传递给 MdDialog open 方法的工作示例吗？ 角度 2.0： https://github.com/ang...
在 Angular Material 19 (M3) 中设置垫子按钮颜色
我正在使用 Angular Material 19.0.3 和 m3 主题机制 这是我的 style.scss html{ 配色方案：浅色、深色； @include mat.theme((颜色: ( 主要：ft-green-theme.$primary-palet...
我正在 Angular 中开发一个应用程序，我主要使用 ng-select 来搜索可搜索的下拉菜单，它的工作方式就像一个魅力。现在我正在将整个应用程序迁移到 Angular Material 并...
Angular 19 更改了语法和底层 scss 文件。 我正在尝试访问定义为 Angular 19 一部分的系统变量 https://material.angular.io/guide/system-variables 但无法...
iPhone Angular 19 材质文字颜色在浅色模式下为白色
桌面、安卓手机都可以。我正在使用 Chrome 来测试它。 默认情况下，它是轻的。 在运行 Chrome 和 Safari 的 iPhone 上，文本均为白色。 我不知道为什么。 请参阅灯光模式： 看看黑暗模式...
Angular Material Paginator 不显示所有 pageSizeOptions
当我单击选择元素时，即使应该出现选项，也没有任何反应。它们也不会出现在 DevTools 中。 当我单击选择元素时，即使应该出现选项，也没有任何反应。它们也不会出现在 DevTools 中。 <mat-paginator [length]="totalApplications" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons="true" (page)="onPageChange($event)"> </mat-paginator> dataSource: any[] = []; totalApplications = this.fullData.length; pageSizeOptions = [10, 20, 50]; pageSize = 20; currentPage = 0; @ViewChild(MatPaginator) paginator!: MatPaginator; ngOnInit(): void { this.updatePageData(); } onPageChange(event: any): void { this.currentPage = event.pageIndex; this.pageSize = event.pageSize; this.updatePageData(); } updatePageData(): void { const startIndex = this.currentPage * this.pageSize; const endIndex = startIndex + this.pageSize; this.dataSource = this.fullData.slice(startIndex, endIndex); } 我添加了这些样式来检查选择选项是否可能被其他元素覆盖，但仍然没有任何改变。 mat-paginator { display: block !important; background-color: #fff !important; } 我设法解决了这个问题。问题是由于隐藏了覆盖容器： styles.scss .cdk-overlay-container { display: none !important; } 删除后，显示选项。 我首先添加了 display: none ，因为在添加分页器之前覆盖容器的位置曾经错误，但这解决了位置问题： styles.scss @use '@angular/material' as mat; @include mat.core();
Angular Material mat-nav-list 活动路线
我正在发现有角度的材料，并且我正在努力寻找在导航组件中突出显示激活路线的正确方法。我注意到导航中默认情况下并未完成此操作
如何删除 Angular Material 日期选择器的下划线
我想删除日期选择器的下划线。 通过使用检查我做到了，但它不能通过CSS工作。我怎样才能通过css做到这一点 ::ng-深{ &.mdc-line-ripple::after{ 边框底部样式：无！
我在 Angular 中使用 Angular Material 进行拖放时遇到问题。我将滚动条从其原始位置移动到内部 div，但现在自动滚动不再起作用。我创建了一个 StackBlitz
我在 Angular 中使用 Angular Material 进行拖放时遇到问题。我将滚动条从其原始位置移动到内部 div，但现在自动滚动不再起作用。我创建了一个 StackBlitz
错误类型错误：无法读取未定义的属性（读取“imageUrl”）角度材料
当我写下这行html代码时： 控制台抛出以下错误： 错误类型Er...
所以， 我正在致力于创建自定义 MatTableDataSource。 目标是使用自定义过滤器/排序并直接与自定义类集成**。** 我遇到了一个问题：我需要打电话给
无法导入 Angular Material v15 预构建遗留主题
我将 Angular 和 Material 更新到了 v15，并且我想使用旧版组件，但是当我尝试导入旧版预构建主题时，出现此错误。 如果我导入材料预建主题（不是遗留主题...
Angular 代码编译良好，但在 VS Code 中出现许多红线
我已经在我的系统中导入了一个项目。尽管我能够编译和运行该项目，但我仍然收到模块和指令的红线。 我已经在导入中导入了必要的模块...
我正在使用 Material 组件开发 Angular 9。我想在垫选择组件中显示一些值。 下面是app.component.html 角度 - 材料 我正在使用 Material 组件开发 Angular 9。我想在 mat-select 组件中显示一些值。 下面是app.component.html <h2> Angular - Material </h2> <mat-form-field> <mat-label>Type</mat-label> <mat-select > <mat-option value="string">Small text</mat-option> <mat-option value="number">Number</mat-option> <mat-option value="date">Date</mat-option> </mat-select> </mat-form-field> <hr> 我的app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'angular-playground'; } 当我使用 ngserve 运行应用程序时，我可以看到包含所有选项的选择框。 但是当我尝试使用 karma ng test 测试此组件时，我在选择框中没有得到任何选项。我尝试检查 HTML DOM，但在 select 中没有看到任何选项标签，并且控制台中没有错误。 app.component.spec.ts import { TestBed, async } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; import { MatFormFieldModule } from '@angular/material/form-field'; import {MatSelectModule} from '@angular/material/select'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule, MatFormFieldModule, MatSelectModule ], declarations: [ AppComponent ], }).compileComponents(); })); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app).toBeTruthy(); }); }); 这是一个非常基本的角度应用程序，我有一个只有选择框的简单组件。不知道为什么它在测试中没有显示选项。 下面是我的app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatFormFieldModule } from '@angular/material/form-field'; import {MatSelectModule} from '@angular/material/select'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatFormFieldModule, MatSelectModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 请帮我解决这个问题。 您必须触发 MatSelectComponent 的切换才能显示选项列表，如下所示： const matSelectComponent = fixture.debugElement.query(By.directive(MatSelect)).componentInstance; fixture.detectChanges(); 现在您可以通过以下方式访问您的选项： const matOptionComponent = fixture.debugElement.queryAll(By.directive(MatOption)); 根据我的经验，By.css()或By.directive()方法不能用于访问MatOption元素。相反，可以以稍微不同的方式访问这些选项： const select = fixture.debugElement.queryAll(By.css('mat-select'))[0].componentInstance; const options: MatOption[] = select.options; ...然后，如果需要对选项本身运行测试，您可以测试选项上的方法，例如： options[i].focus(); // i = index, triggerEventHandler('focus') options[i].select(); // triggerEventHandler('select') options[i].deselect(); // triggerEventHandler('deselect') options[i].getLabel(); // triggerEventHandler('getLabel') options[i].toggle(); // triggerEventHandler('toggle') options[i].disabled; options[i].selected; options.length; 所有这些方法都可以在位于 @angular/material/core 的源代码中找到。 （右键单击导入语句中的 MatOption）。