Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
在 Angular 中滚动到具有相同 ID 的部分时如何正确定位固定导航栏？
我正在开发一个 Angular 项目，其中页面上有多个部分，每个部分都有一个唯一的 ID。我还有一个固定位置的导航栏，允许用户导航到这些部分。我的目标是
材料数据表 - NullInjectorError：没有 CdkColumnDef 的提供程序
如何在没有数据源（静态数据）的情况下使用材料设计数据表布局？我在 https://material.angular.io/components/table/examples 上找不到此用例的示例。比如我
我试图在垫子桌上展示员工的一些细节。我制作的同一张表可编辑。除了日期选择器之外，每个字段都在工作。因为日期选择器值是相同的（最后一个...
我有一个像这样的 mat-tab-group，其中选项卡内容是根据所选选项卡决定的： 我有一个像这样的mat-tab-group，其中选项卡内容是根据所选选项卡决定的： <mat-tab-group dynamicHeight=""> <mat-tab *ngFor="let investorScheme of investorDashboardData?.investorSchemes" label='{{investorScheme.schemeName}}'> <mat-form-field class="w-50" appearance="outline"> <mat-label>As On Date</mat-label> <mat-select [(ngModel)]="selectedDate"> <mat-option *ngFor="let d of investorScheme.displayDates" [value]="d"> {{d}} </mat-option> </mat-select> </mat-form-field> <table> </table> </mat-tab> </mat-tab-group> 如您所见，我在选项卡内显示了一个 select 框，其中选项是根据所选选项卡动态设置的。 我的要求是每当选项卡更改时默认选择第一个mat-option。 我正在寻找一种方法以某种方式附加或传递所选选项卡的数据，我可以在(selectedTabChange)事件中读取这些数据，但即使经过大量搜索，我也找不到任何方法来做到这一点。 有什么办法可以将一些数据附加到ts文件中可以读取的选项卡上吗？ 如果没有，有没有办法设置选项卡更改时选择默认选择的第一个选项，并根据选项卡加载选择？ 是的，您可以使用 selectedTabChange 事件： tabChange(event: MatTabChangeEvent) { this.selectedDate = this.investorDashboardData.investorSchemes[event.index].displayDates[0]; } <mat-tab-group dynamicHeight="" (selectedTabChange)="tabChange($event)"> ... </mat-tab-group> 演示@StackBlitz
我正在使用带有角度材料和顺风的角度9。 如何修复表单标题，以便向下滚动页面时标题跟随？ 我正在使用带有角材料和顺风的 Angular 9。如何修复表单标题，以便向下滚动页面时标题跟随？<table @stagger mat-table [dataSource]="dataSource" matSort style="width: 100%;"> <ng-container *ngFor="let column of columns; trackBy: trackByProperty"> <ng-container *ngIf="column.type === 'text'" [matColumnDef]="column.property"> <th *matHeaderCellDef class="uppercase" mat-header-cell mat-sort-header> {{ column.label }} </th> <td *matCellDef="let row" [ngClass]="column.cssClasses" mat-cell> {{ row[column.property] }} </td> </ng-container> </ng-container> </table> 示例1当我向下滚动时，标题消失了示例2我已经尝试使用粘性类：class="sticky top-0 z-50" 还有纯CSS：.sticky-header { position: sticky; top: 0; background-color: white; /* Para que o cabeçalho não sobreponha o conteúdo */ z-index: 1; /* Para garantir que o cabeçalho esteja acima das linhas */ } 我可以尝试做什么？我希望我说清楚了；谢谢=D 您通常几乎可以修复标题，将以下类添加到您的元素和标题行： 请参阅标题文档：material_angular_header_docs 我在下面提供了帮助的代码： <th mat-header-cell *matHeaderCellDef class="sticky top-0 z-50 bg-white uppercase" mat-sort-header> {{ column.label }} </th> 然后到你的html文件 <tr mat-header-row *matHeaderRowDef="displayedColumns" class="sticky top-0 z-50 bg-white"></tr>
理解 Angular Material m3 中的 get-theme-color
我有一个带有“a”项目和垫菜单的导航栏： 项目 我有一个带有“a”项目和垫菜单的导航栏： <nav class="navbar"> <a routerLink="..."> <span>Project</span> </a> <a mat-icon-button [matMenuTriggerFor]="userMenu"> <mat-icon>account_circle</mat-icon> </a> ... 我希望两个元素都是白色的。所以我尝试的是这样的： @mixin theme($theme, $variant-colors) { $text-color: mat.get-theme-color($theme, on-primary); a > span { color: $text-color } --mdc-icon-button-icon-color: $text-color; } 对于跨度，它工作正常，但对于图标颜色则不然（图标为黑色）。如果我直接设置--mdc-icon-button-icon-color: #fff，就可以了。 顺便说一句。我在使用角形材料 m3 时遇到了一些困难。如果有人知道好的教程请告诉我。非常感谢！ 你尝试过吗... a > span { color: $text-color } a > mat-icon { color: $text-color } 祝您的项目顺利。
我有一些按钮应该比正常尺寸大。我找到了一些以前版本的代码： $my-custom-input: mat.define-typography-level( $font-family: 'Roboto', $字体粗细...
我有一个 Angular 18 中的应用程序，其中包含一个包含材料日期选择器的页面。 当我弹出日期选择器时，一切都很好，但是当我用左/右箭头或年份更改月份时，数据就会消失......
我使用有角度的材料 18。在我们的应用程序中，我们使用带有不同颜色的日志的按钮。如何使用调色板中未定义的颜色？ 假设我们有一个用于批准文档的绿色按钮...
Angular Material 和 CSS Flex 布局
我有一个有角材料卡内的组件。该组件有两个 div，内容和页脚都包装在容器 div 中 .包装器{ 显示：柔性； 弯曲方向：
我有一个奇怪的情况，深度嵌套的 HTML 代码段可能会从我无法预测或控制的父级继承一些样式。该小部件非常简单...... 我有一个奇怪的情况，深度嵌套的 HTML 代码段可能会从父级继承一些我无法预测或控制的样式。该小部件非常简单...... <mat-form-field appearance="fill" class="full-width-input" *ngIf="!isMultiSelect"> <mat-label>{{ selectListForm.get('commonSettings').get('label')?.value }}</mat-label> <mat-select [value]="data?.state?.defaultValue"> <mat-option *ngFor="let option of options.controls" [value]="option.get('value')?.value"> {{ option.get('label')?.value }} </mat-option> </mat-select> <mat-hint class="custom-mat-hint">{{ selectListForm.get('commonSettings').get('suggestedText')?.value }}</mat-hint> </mat-form-field> .scss 样式也不是那么狂野... .preview-section { position: relative; mat-form-field { display: block; margin-bottom: 0.5rem; } .custom-mat-hint { display: block; margin-left: 24px; font-size: 0.75rem; color: rgba(0, 0, 0, 0.54); } } .preview-title { color: #5c9edb; /* Light blue color */ font-weight: bold; /* Make it bold for emphasis */ } .preview-wrapper{ margin-left: 15px; margin-top: 8px; } 但是每当选择列表的宽度大于 280 像素时，右侧的下拉箭头似乎会在 270 像素左右撞到墙上并粘在那里。因此，如果对象为 400 像素，则箭头看起来位于对象的中间而不是右侧。这是可以覆盖的内部材料限制吗？ 我认为 mat-select 通过父 CSS 具有 280px 的宽度。因此，您可以手动设置高度，从而覆盖父级 CSS。 ::ng-deep的使用是不受欢迎的，所以你也可以将此样式添加到全局样式中。 ::ng-deep mat-select.full-width { width:100% !important; } 我们可以添加一个类 full-width 来单独限制对此选择的更改。 <mat-form-field appearance="fill" class="full-width-input"> <mat-label>Favorite food</mat-label> <mat-select class="full-width"> @for (food of foods; track food) { <mat-option [value]="food.value">{{food.viewValue}}</mat-option> } </mat-select> <mat-hint class="custom-mat-hint">some hint</mat-hint> </mat-form-field> Stackblitz 演示
正如您在 stackblitz 示例中所看到的，普通 html 选择在水平可滚动 div 中工作正常，但在 mat-select（或材质菜单）中则不行。 要重现，请滚动到左侧并单击
将 Angular 项目从 Angular 11 迁移到 Angular 18：CSS 和 Angular Material 问题（mat 与 mat-mdc）
我最近将我的项目从 Angular 11 迁移到 Angular 18，更新了所有相关包，包括 Angular Material。完成迁移后，我遇到了一些问题需要帮助
我认为这是一个非常常见的问题，尽管我无法找到解决方案。 我定义了一个深色和一个浅色主题，例如： 样式.scss @使用“@angular/material”作为垫子； // 包括
我一直在为 Angular 组件编写一个组件测试，用于检查表单验证。现在，我面临的问题是，当我正常加载表单时，通过浏览器，f...
我有这段代码，正如你所见，ngModel 已被弃用 我也从此网页尝试过此操作，但随后我的复选框未选中： 然后我尝试了 [checked]="checked" 这也不是
我想要一个甘特图库，当我们将鼠标悬停在时间线中时，该库具有显示特定日期正在工作的资源数量的功能 我在 dhtmlx、ej2.syncfusion、devexpress ... 中搜索
我正在寻找一个带有卡片自动高度的网格，如下所示： 我正在使用 Material Design 和 Angular 4，如果有一些使用 React 或 VueJS 的解决方案也很好。 我开始...
我正在开发一个 Angular 组件，如果输入字段被触摸并且无效，我想在该组件中显示错误消息。但是，错误消息并未按预期出现。 错误消息&q...
我有 FrontDesk/FrontDesk.UserInterface 项目已将所有包更新到 Angular 15。您可以查看下面的屏幕截图。 我执行了以下命令 nggenerate@angular/material:mdc-