Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
Angular v14 - 使用 Angular Material CDK 拖放来放置项目时，CurrentIndex/PreviousIndex 始终为 0
我们正在使用 Angular v14 和 Angular Material。我们当前使用 CDK 拖放来拖放嵌套结构中的（子）项目。当我们删除一个（子）项目时，previousIndex 和
出现错误“mat-nav-list不是已知元素”，使用@angular/material”版本“^5.2.5”
它是嵌套的垫菜单，并具有用于选择多个项目的复选框。 单击复选框后，它会关闭菜单。选择多个项目时应保持不变。 “@角度/核心”：“^17...
我正在开发一个具有可配置菜单结构的样板项目。其中的菜单绑定到递归数据类型。我想通过 ng-container 和 ng-template 来解决这个问题，因为在我看来
如何使用 @Output 和 EventEmitter 将数据从一个组件传递到 Angular 中的另一个组件？
我想从login.component.ts传递uuid，该uuid是在单击login.component.html中定义的下一个按钮后生成的，并在login-challenge.component.ts中使用它。我正在使用 @Output 和
Angular mat-table colspan 不会跳过列，在表中留下额外的列
在我的 12 个月的 mat-table 中，我尝试跨多个月跨单元格。但是，数据源中不会跳过跨越的月份，因此存在额外的列...
我正在使用角树材质来显示 JSON 数据，我对行之间的白色间距量不满意。我尝试在 css 中使用 mat-tree-node.line-height ......
Angular mat 表行未在具有异步代码的列中显示正确的数据
当属性行之一有数据时，我尝试更新并显示垫表中的属性行。当我设置硬编码同步数据时它可以工作，但当我将异步设置为
如何在 <mat-option> 的多个 <mat-select> 中创建元素，即使宽度相同？ （角度）
我正在尝试创建一个可以在所有应用程序中使用的过滤器组件。我们正在使用材料角度库来做到这一点。 它工作正常，它显示了要选择的产品列表，但是，正如您...
我有一个简单的垫子桌： 我有一张简单的垫子桌： <div class="tableEnclosing"> <mat-table class="mat-elevation-z8" [dataSource]="dataSource"> <ng-container matColumnDef="id" matSort> <mat-header-cell *matHeaderCellDef mat-sort-header>#</mat-header-cell> <mat-cell *matCellDef="let item;">{{item.id}}</mat-cell> </ng-container> <ng-container matColumnDef="name" matSort> <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell> <mat-cell *matCellDef="let item;">{{item.name}}</mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row> </mat-table> </div> 我正在尝试将此表格的宽度设置为 50%。 我可以轻松地从我的 scss 文件访问此表，如下所示： .mat-mdc-table { width: 50%; background: red; } 背景设置正确，但宽度没有任何作用，表格仍然是100%。有人说封装：ViewEncapsulation.None 可以解决问题，但似乎不推荐。设置 .tableEnclosing {width: 50%} 也可以解决问题，但这看起来也很奇怪。 那么有没有更好的方式来设计垫子桌呢？该解决方案是否适用于所有垫子组件？我能找到的唯一宽度样式是列宽度的样式，与实际表格本身无关。 版本： "@angular-devkit/build-angular": "^17.1.0", "@angular/cli": "^17.1.0", "@angular/compiler-cli": "^17.1.0", "@angular/material": "^17.1.2", "typescript": "~5.3.2" 我尝试过： table { width: 50%; } .mat-mdc-table { width: 50%; } 预计： 表格宽度为 50%。 我们可以将表格包裹在 div 上并将样式设置为 width:50% 这将设置网格的宽度！ <div style="width: 50%"> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <!--- Note that these columns can be defined in any order. The actual rendered columns are set as a property on the row definition" --> <!-- Position Column --> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef>No.</th> <td mat-cell *matCellDef="let element">{{element.position}}</td> </ng-container> <!-- Name Column --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef>Name</th> <td mat-cell *matCellDef="let element">{{element.name}}</td> </ng-container> <!-- Weight Column --> <ng-container matColumnDef="weight"> <th mat-header-cell *matHeaderCellDef>Weight</th> <td mat-cell *matCellDef="let element">{{element.weight}}</td> </ng-container> <!-- Symbol Column --> <ng-container matColumnDef="symbol"> <th mat-header-cell *matHeaderCellDef>Symbol</th> <td mat-cell *matCellDef="let element">{{element.symbol}}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> </div> Stackblitz 演示
我面临日历定位问题。每当我点击日历图标时，日历就会显示在整个页面的左上角，并且是透明的。 我正在提供我的...
我的 Angular 应用程序上显示了一个日历来选择日期，并且由于我住在一个国家/地区是其自定义的从星期一开始的周，所以我需要更改日历以从星期一开始......
如何将 Material 3 主题生成器网站生成的主题应用到 Angular 17.2.0 的项目中？
我正在使用 Angular 17.2.0，我希望将自定义主题应用到我的 Material 3 UI（实验）。我从 https://m3.material.io/theme-builder 生成了一个主题。我导出了主题，这给了我一个...
需要有关 Mat-date-picker 日历错误定位的帮助
我面临日历定位问题。每当我点击日历图标时，日历就会显示在整个页面的左上角，并且是透明的。我正在提供我的...
在 Angular 中，在 mat-dialog 中打开时，mat-autocomplete 不会在点击外部时关闭
我正在 mat-dialog 内使用表单，当在外部单击时，我无法关闭 mat-autocomplete 下拉列表。我已经以相同的方式实现了 mat-select，并且他工作正常。 我在这里...
我想以编程方式聚焦链接。以下 stackblitz 显示了该行为： https://stackblitz.com/edit/angular-9jocb8?file=src%2Fmain.ts,package.json 如果您单击该按钮，则会出现链接
Angular Material DatePicker 不可见
我正在尝试在我的项目中使用角度材料日期选择器。日期选择器本身是不可见的，但如果我单击它的位置或日历图标所在的位置，它就会起作用。为了清楚起见，我添加了一个
matDatepickerFilter自定义函数可选择日期无法选择（Angular Material v15）
我创建了一个自定义函数来过滤日期，该函数成功禁用了我不想选择的日期，但是当我单击可单击的日期时，它们什么也不做，没有错误或
我有一个使用@ViewChild的应用程序，下面是我的代码 @ViewChild('paginator', { 读取: MatPaginator, static: true}) 公共分页器: MatPaginator; 在我正在使用的前面 我有一个使用@ViewChild的应用程序，下面是我的代码 @ViewChild('paginator', { read: MatPaginator, static: true}) public paginator: MatPaginator; 在我正在使用的前面 <mat-paginator [ngStyle]="{'display': orders.length > 0 ? 'flex': 'none' }" #paginator> 我已经实现了 AfterViewInit，这是我刚刚检查分页器是否已初始化的代码： ngAfterViewInit(): void { console.log('tab group', this.paginator); } 但是 this.tabGroup 未定义，因此我无法设置它的属性。我做错了什么。 谢谢 从 Angular 8 开始 ViewChild 和 ContentChild 装饰器必须有一个名为 static 的新选项。 如果您在动态元素（包装在条件或循环中）上添加 static: true，则在 ngOnInit 和 ngAfterViewInit 中都无法访问它。 将其设置为 static: false 应该会按照您的预期运行。 此外，更新到 Angular 8 时，在命令行中将出现一条消息，解释新的 ViewChild 和 ContentChild 更改，以及链接 此文档页面，以及 这里是更改的拉取请求，并有一些解释。这可能有助于您理解这些变化。