Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
CdkVirtualScrollViewport 标头未修复
在我的角度应用程序中，我想将表格标题保持在固定位置并仅将滚动条显示到主体部分。 我正在使用 Angular 的 CdkVirtualScrollViewport 库来绘制表格
有没有办法在 Angular Material 18 中动态更新应用程序排版配置？
我希望将字体大小作为应用程序设置中的配置选项，目前我有一个正在应用程序范围内应用的排版配置集。 @include mat.all-component-
<mat-tab class="StatusTab" label="Status"> <mat-table class="table mat-elevation-z10" [dataSource]="statusDetails"> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef>Staff-id</mat-header-cell> <mat-cell *matCellDef="let staff">{{staff.staff_id}}</mat-cell> </ng-container> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell> <mat-cell *matCellDef="let staff">{{staff.name}}</mat-cell> </ng-container> <ng-container style="width: 10px;" matColumnDef="status"> <mat-header-cell *matHeaderCellDef>Status</mat-header-cell> <mat-cell *matCellDef="let staff">{{staff.status}}</mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="columns"></mat-header-row> <mat-row *matRowDef="let staff;columns:columns"></mat-row> </mat-table> </mat-tab> CSS： .table { width: 100%; margin:50px; } .mat-column-id { width: 32px; border-right: 1px solid black; } 默认宽度太长，无法向右滚动，我想指定宽度。 我尝试使用.mat-column-COLUMNNAME但它不起作用。但这只有在我使用 <table mat-table> 时才有效。 您还应该使用 max-width CSS 规则来强制列的最大宽度。 .mat-column-id { width: 32px; border-right: 1px solid black; max-width: 32px; } 演示@StackBlitz
<mat-tab class="StatusTab" label="Status"> <mat-table class="table mat-elevation-z10" [dataSource]="statusDetails"> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef>Staff-id</mat-header-cell> <mat-cell *matCellDef="let staff">{{staff.staff_id}}</mat-cell> </ng-container> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell> <mat-cell *matCellDef="let staff">{{staff.name}}</mat-cell> </ng-container> <ng-container style="width: 10px;" matColumnDef="status"> <mat-header-cell *matHeaderCellDef>Status</mat-header-cell> <mat-cell *matCellDef="let staff">{{staff.status}}</mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="columns"></mat-header-row> <mat-row *matRowDef="let staff;columns:columns"></mat-row> </mat-table> </mat-tab> css : .table{ width: 100%; margin:50px; } .mat-column-id{ width: 32px; border-right: 1px solid black; } 默认宽度太长，无法向右滚动，我想指定宽度。 我尝试使用 .mat-column-COLUMNNAME 但它不起作用。但这仅在我使用 时才有效。 您还应该使用 max-width CSS 规则来强制列的最大宽度。 .mat-column-id { width: 32px; border-right: 1px solid black; max-width: 32px; } 演示@StackBlitz
如何将 MatBottomSheetRef 注入到 Bottom-Sheet 内加载的 childComponent 中？
在官方的角度材料组件文档中它说 底部工作表内包含的任何组件也可以注入 MatBottomSheetRef。 我想从...调用sheetRef.dismiss()
“mat-toolbar”不是已知元素 - Angular 5
我创建了一个新项目，我正在尝试添加角度材料。 我在我的应用程序文件夹中创建了material.module.ts： 从“@angular/core”导入{NgModule}； 进口 { MatButton 模块，...
错误：编译 Angular 18 应用程序时无法将类型实体 i10.MatLegacyDialogModule 解析为符号
我已将 NX Angular monorepo 从 15.2.0 更新到版本 18.2.7。当我尝试构建我的应用程序时，它抛出以下错误 ./apps/apc/ui/src/main.ts - 错误：模块构建失败（来自 ./
嘿，大家好，我面临着一个问题，即 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+。使用我在文档中找到的以下示意图，我生成了一个自定义主题，包括自定义...