Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
我有一个 Angular 13 应用程序，并且正在使用 Angular Material。 我的问题是垫选择控件在多个选项中看起来不正确。 我的代码： .ts 浇头 = new FormControl('');
我想删除的切换效果。当我单击“Accent Fish”芯片（此处为视频）时，它应该如视频中所示被选中，但是当我再次单击它时......
如何在 Mat Date Picker 中隐藏日历标题（calendarHeaderComponent）
我添加了一个日期选择器： 每月安排日 我添加了一个日期选择器： <mat-form-field appearance="outline" class="pad-20"> <mat-label>Monthly Scheduling Day</mat-label> <input matInput [matDatepickerFilter]="monthlyDateFilter" [matDatepicker]="testPicker" (dateChange)="onDateSelectionChange('Monthly', $event)" onkeypress="return false;" [formControl]="monthlyDatePickerForm"> <mat-datepicker-toggle matSuffix [for]="testPicker"></mat-datepicker-toggle> <mat-datepicker #testPicker></mat-datepicker> </mat-form-field> 而且我不想要日历标题组件 它应该有点像下图 我可以使用什么选项来使其正常工作。 虽然这已经很旧了，但我来寻找相同的解决方案，但没有看到答案。 我发现这可以通过使用 calendarHeaderComponent 功能来完成，该功能至少从 Material v6.4.7 开始可用。您可以按照发布的示例来创建和使用自定义标头组件。 但是，只需定义并传递一个空白组件即可： /** Custom header component for datepicker. */ @Component({ selector: 'blank-header', template: ``, standalone: true, }) export class BlankHeader<D> {} 这将创建以下输出：
如何在 ngx-mat-select-search 上设置自定义 mat-select 标头？
目前我的自定义 ngx-mat-select-search 如下所示： 我希望它看起来像这样，在搜索字段上方有一个标题“Cleint Type, No. of PDO”。如何在 ngx-mat-select-s 中实现这一点...
ngxDaterangepickerMd 在迁移到基于 MDC 的 Angular Material 组件后不可见
我还使用 ngx-daterangepicker-material 库，并且我已使用 Angular Material v15 从旧组件更新为 MDC 组件。迁移后，日期选择器不再可见...
我正在寻找将 id 附加到 mat 步骤的最佳方法，以便我可以从服务中识别当前步骤。例如 我正在寻找将 id 附加到 mat 步骤的最佳方法，以便我可以从服务中识别当前步骤。例如 <!-- component.html --> <mat-stepper #stepper> <mat-step someId="step1">content1</mat-step> <mat-step someId="step2">content2<mat-step> </mat-stepper> //component.ts @ViewChild('stepper') stepper: MatStepper isFirstStep() { return this.stepper.selected.someId === "step1" } 推荐的方法是什么？ 我不想使用索引，因为我动态插入步骤，我也不想在所有 Mat-Steps 上使用 ViewChild，因为我想识别服务中组件外部的步骤，该服务仅引用步进器并知道标签。另外，我不想使用通常的 id 属性，因为我在模板中有两次步进器。 我想使用一个扩展 mat-step 并具有 someId 的组件，但它看起来太复杂了。有更好的办法吗？ 我发现你可以使用“状态”，你可以像这样访问它： TS： public stepperChangeStep(event) { if (event.selectedStep.state === "something") { // do stuff } } HTML： <mat-horizontal-stepper #stepper (selectionChange)="stepperChangeStep($event)"> <mat-step label="{{myTitle}}" state="{{customState}}"> </mat-step> </mat-horizontal-stepper> 不认为它应该这样使用buuuuuuut... https://material.angular.io/components/stepper/overview
在具有多个属性的 Angular Material 选择元素中显示自定义“值”
我正在尝试使用多个选项创建一个角度 MatSelect 输入，如下所示： &l...
错误：NG01203：没有表单控件名称的值访问器：'name'
有人可以帮助我吗？我有两个组件“父级”和“子级”。在父组件中，我有这个 formGroup 和两个获取人员和城市的方法。 ngOnInit() { this.form = this.fb.group({ 人：
我有一个带有多个选项的垫菜单。如果打开，它将聚焦或突出显示列表中的第一项。我怎样才能让它聚焦/突出显示我选择的项目 - 比如第三个项目？ 我有一个包含多个选项的垫式菜单。如果打开，它将聚焦或突出显示列表中的第一项。我怎样才能让它聚焦/突出显示我选择的项目 - 比如第三个项目？ <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-menu #menu="matMenu"> <button mat-menu-item>Item 1</button> <button mat-menu-item>Item 2</button> <button mat-menu-item>Item 3</button> <button mat-menu-item>Item 4</button> </mat-menu> 由于可访问性，不建议这样做。如果视障用户打开菜单，他希望焦点位于第一个菜单项上。 来源：https://www.w3.org/WAI/ARIA/apg/example-index/menu-button/menu-button-links#kbd_label 向要聚焦的菜单项元素添加模板引用，然后使用 @ViewChild 获取元素引用，然后打开菜单时使用 focusItem 模板引用将焦点设置到菜单项 <button mat-button [matMenuTriggerFor]="menu" (menuOpened)="menuOpened()"> Menu </button> <mat-menu #menu="matMenu"> <button mat-menu-item>Item 1</button> <button mat-menu-item>Item 2</button> <button mat-menu-item #focusItem>Item 3</button> <button mat-menu-item>Item 4</button> </mat-menu> @ViewChild('focusItem') menuItemElement: MatMenuItem; menuOpened() { this.menuItemElement.focus('keyboard'); } 附注我正在使用最新的角材质版本 我也有同样的行为。我注意到，当聚焦 mat-list-item 时，它有一个 ::before sudo 元素。我通过设置我的 .scss 修复了它 mat-list-item::before { display: none; } 这适用于角度材料：18.1.0。自这篇文章发布以来已经过去了一段时间，但希望它对其他人有帮助。
如何在垫选择选项中自定义垫复选框的颜色，如下所示 选择群组<...
Angular Material MatPaginator 显示第 0 页（共 0 页）
抱歉提前问这个问题。在写这篇文章之前我用谷歌搜索了我的问题并尝试了很多解决方案，但没有运气。 我是一个试图学习 Material 的 Angular 菜鸟。 我的简单项目创建了一个 http
所以我一直在尝试在我的 Web 应用程序开发中采用 Materials Accordion。 然而，随着内容的增长，使标题的大小扩大会遇到一些麻烦。 我的标题预计...
我使用 mat 表来显示数据，我的 API 提供逐页数据。 现在第一次渲染，然后用户更改页面并刷新页面，然后我想显示第二页而不是第一页......
如何在 Angular 的 mat-table 中添加加载器
代码： &... 代码： <table mat-table [dataSource]="dataSource" matSort class="table table-responsive"> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr class="mat-row" *matNoDataRow> <td class="mat-cell" [attr.colspan]="displayedColumns.length"> No data to dislay. </td> </tr> </table> 这里我添加了这个用于空数据，但是有任何加载功能吗？ 我从 api 获取数据，所以需要一些时间。如果响应数据为空，那么我上面的代码工作正常，但我希望加载器也能做同样的事情 网站“WhatsLawyers.com”是一个 WordPress 博客，提供各种类型法律服务的文章和提示，包括家庭法、房地产法、事故法、商业法、刑事法、医疗法和伤害法。它以最近的帖子和分类信息为特色，提供有关法律事务的实用建议和见解，帮助读者了解自己的权利以及聘请专业律师的好处。 访问 WhatsLawyers.com 了解更多信息。
我们将在 Angular 12 上创建一个新项目。我需要建议来选择 UI 框架。 我们有 Bootstrap 5、Angular Material 和 primeNg 选项。 我做了以下研究： 嘘...
我使用了 Angular Material m3 (v18) 的主题生成器。生成的文件如下所示： $_调色板：（ 基本的： （ 0：#000000， 10：#001a43， 20：#002d6c， ... $_休息：（ 次要：...
Angular-Material2：垂直对齐文本和 md-icon 以匹配垂直样式？
我知道我可能在这里遗漏了一些东西。我正在尝试垂直对齐 md-icon 和一些文本，现在“示例文本”一词显示在图标下方。 家 我知道我可能在这里遗漏了一些东西。我正在尝试垂直对齐 md-icon 和一些文本，现在“示例文本”一词显示在图标下方。 <div> <md-icon>home</md-icon> Sample Text </div> 输出： 我确实尝试使用跨度在示例文本上进行垂直对齐，但无法让任何东西正常工作，而且无论如何都感觉有点hacky。 有人知道如何达到这个效果吗？ 这是使用<md-icon>时的常见问题。要对齐图标和文本，您可以将文本放在跨度内并对其应用样式： <div> <md-icon>home</md-icon><span class="aligned-with-icon">Sample Text</span> </div> 在你的component.css中： .aligned-with-icon{ position: absolute; margin-top: 5px; margin-left: 5px; /* optional */ } 如果您要将多个图标放在同一个 div 中，也可以使用 relative 位置。这是CSS： .aligned-with-icon-relative{ position: relative; top: -5px; margin-left: 5px; /* optional */ } 另一种选择是在外部 div 上使用 flex 显示，并使用 align-items 到 center： 在你的html中： <div class="with-icon"> <md-icon>home</md-icon>Sample Text </div> 在你的CSS中： .with-icon { display: flex; align-items: center; } 这是一个 Plunker 演示 我使用 inline 属性。 这将使图标根据按钮的大小正确缩放。 <button mat-button> <mat-icon inline=true>local_movies</mat-icon> Movies </button> <!-- Link button --> <a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a> 我将此添加到我的 styles.css 中： 解决按钮内图标垂直对齐问题 与按钮文本相比，材质图标字体总是有点太小了 button.mat-button .mat-icon, a.mat-button .mat-icon, a.mat-raised-button .mat-icon, a.mat-flat-button .mat-icon, a.mat-stroked-button .mat-icon { vertical-align: top; font-size: 1.25em; } 你可以使用 div { display: flex; vertical-align: middle; } 或 span { display: inline-flex; vertical-align: middle; } 这可以使用 CSS flexbox 来实现 <!-- HTML part --> <div class="outer-div"> <mat-icon>home</mat-icon> <span>Home</span> </div> <!-- CSS part --> .outer-div { display: flex; flex-direction: column; align-items: center; } .outer-div > span { font-size: 10px; } 我必须说，这么简单的事情应该可以开箱即用。 但您可以使用 position: absolute 将图标垂直居中，如下所示： 您可以在这里找到演示 button { /* manually making space for mat-icon because mat-icon is not position: absolute */ padding-left: 30px; } ::ng-deep .mat-icon{ font-size: 16px !important; /*change this as per your needs*/ position: absolute; top: 50%; transform: translate(-22px, -50%); /*centering image inside mat-icon box*/ display: flex !important; justify-content: center; align-items: center; } 按照@rynop给出的答案，但对于简单的div的情况，将其放入src\styles.scss足以修复对齐： .mat-icon.mat-icon-inline:not(:only-child) { vertical-align: top; }
使用 Material CDK 库中的拖放行为，我尝试在拖动 cdkDrag 元素时更改光标。 例如，在此 StackBlitz 中，光标在悬停时被抓取。我会...
我在材料 3 规格中看到了导航栏： https://m3.material.io/components/navigation-rail/overview 但它似乎没有对应的 web/angular 组件。 如何使用
可以调整mat-form-field-outline的粗细吗？
我正在尝试设置角度材质的输入样式，使其看起来与此应用程序中的所有输入相同。 是否可以调整明细表输入轮廓的粗细，使其与项目的宽度相同