Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
解决 NullInjectorError：Angular 组件中没有 MatDialogRef 的提供程序
我创建了一个 Angular 组件，允许在不使用对话框的情况下创建任务。但是，我还想在对话框中启用任务创建。 当我加载网站时，我遇到了
为什么它告诉我如果所有html元素都有值，则target的value属性不存在？
我正在做一个与API相关的项目，我正在使用Angular、Angular Material、Typescrit和RXJS，错误是在尝试突出显示搜索栏时，在这段html代码中我收到错误...
Angular Material mat-chip 上的文本颜色
我有一个 mat-chip-set 和几个带有自定义产品芯片类的 mat-chip 对象： 我有一个 mat-chip-set 和几个带有自定义 mat-chip 类的 product-chip 对象： <mat-chip-set> <mat-chip class="product-chip" *ngFor="let category of categories"> {{category}} </mat-chip> </mat-chip-set> 我的CSS是： .product-chip { background-color: pink !important; color: white !important; } 结果是芯片背景颜色是我想要的粉红色，但文字颜色仍然是黑色。 如何将 mat-chip 对象的文本颜色设为白色？ 参见 StackBlitz 示例：https://stackblitz.com/edit/angular-nzhkmg?file=src/app/chips-overview-example.html 我会编辑使用的变量。 style.css .mat-mdc-standard-chip { --mdc-chip-label-text-color: #fff; } 此外，检查其他选项的作用，以在芯片处于其他状态（禁用）时保持样式一致。 .mat-mdc-standard-chip { --mdc-chip-elevated-container-color: #e0e0e0; --mdc-chip-elevated-disabled-container-color: #e0e0e0; --mdc-chip-label-text-color: #fff; --mdc-chip-disabled-label-text-color: #212121; --mdc-chip-with-icon-icon-color: #212121; --mdc-chip-with-icon-disabled-icon-color: #212121; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121; --mdc-chip-with-trailing-icon-trailing-icon-color: #212121; --mdc-chip-with-icon-selected-icon-color: #212121; } 示例：https://stackblitz.com/edit/angular-nzhkmg-dk3hsm?file=src%2Fstyles.scss 您可以创建一个指令，将文本和背景颜色作为输入，例如如下： chip-theme.directive.ts： import { Directive, ElementRef, Input, OnInit } from '@angular/core'; type ChipTheme = { backgroundColor: string; color: string; }; @Directive({ selector: '[appChipTheme]', }) export class ChipThemeDirective implements OnInit { @Input('appChipTheme') theme: ChipTheme; constructor(private el: ElementRef) {} ngOnInit(): void { const natEl = this.el.nativeElement; const { color, backgroundColor } = this.theme; // Background Color natEl.style.backgroundColor = backgroundColor; // Text Color natEl.style.setProperty('--mdc-chip-label-text-color', color); } } 然后在 HTML 模板中使用如下： <mat-chip *ngFor="let chip of chips" [appChipTheme]="{ color: chip.color, backgroundColor: chip.bgColor }"> <span>{{ chip.text }}</span> </mat-chip> 不要忘记在 app.module.ts 中导入指令。
我正在尝试从 Angular html 页面调用打字稿函数。我想在函数中传递一个参数。该参数将是一个布尔值，表示是否选择 mat-chip。我谷歌了...
单击按钮后，会打开一个 MatDialog 组件，其中包含一些 html 和其他 Angular 材质组件。 我正在使用 mat-elevation-z5 类，对话框如下所示： 我想...
mat-table Angular 中的动态 matHeaderRowDef
我即将动态绑定垫表中的组标题行。但 DOM 找不到 headerId。 HTML： ...
我正在开发一个项目，我需要使用多选下拉菜单实现搜索。当我添加下面的代码时，我可以进行搜索，但我之前选择的值在新搜索后消失了。
我有一个动态选项卡内容，从一个选项卡移动到另一个选项卡时，选项卡内容闪烁。 我有一个动态选项卡内容，从一个选项卡移动到另一个选项卡时，选项卡内容闪烁。 <md-tabs md-dynamic-height class="md-primary"> <md-tab data-ui-sref="common.usermanagement.userclassmaintenance" md-active="$state.includes('common.usermanagement.userclassmaintenance')"> <md-tab-label> User-class Maintenance </md-tab-label> <md-tab-body> <md-content ng-cloak flex layout="column" class="md-padding"> <div data-ui-view="userclassmaintenance"></div> </md-content> </md-tab-body> </md-tab> <md-tab data-ui-sref="common.usermanagement.usermaintenance" md-active="$state.includes('common.usermanagement.usermaintenance')"> <md-tab-label> User Maintenance </md-tab-label> <md-tab-body> <md-content ng-cloak flex layout="column" class="md-padding"> <div data-ui-view="usermaintenance"></div> </md-content> </md-tab-body> </md-tab> </md-tabs> 我还包含了以下 CSS 部分，这是我从另一篇文章中获得的。但不适合我。 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 我也面临着与mat-tab类似的情况。 我使用以下代码： <mat-tab-group dynamicHeight="true"> <mat-tab label="Pivot View"> <ng-template matTabContent> <app-missing-data-pivot [requestBody]="dataSource"></app-missing-data-pivot> </ng-template> </mat-tab> </mat-tab-group> dynamicHeight="true"导致选项卡内的元素闪烁。我删除了它，一切都很好。 确保闪烁不是由仅显示几毫秒的旋转器和覆盖层引起的！ 我通过将 mat-tab-group 的最大宽度从 100% 更改为 99% 来修复我的问题，如下所示：
使用带有展开/折叠行的 mat-table 数据显示树状结构
Angular 新手，希望有人能在这里帮助我。我需要显示 mat-table，其中可能有多行数据可以展开/折叠。这是我想要显示的结构： ...
Angular - 如何从 mat-list-text 中删除 padding-right？
我正在尝试向 mat-list-item 添加一个按钮。这是我当前的 HTML 模板代码： 我正在尝试向 mat-list-item 添加一个按钮。这是我当前的 HTML 模板代码： <mat-selection-list [multiple]="false" [class.selected]="currentItem" formControlName="itemListControl" > <mat-list-option *ngFor="let item of items" [value]="item.id" > <div style="display: flex; justify-content: space-between; align-items: center"> <div style="display: flex; align-items: center"> {{ item.name }} </div> <button mat-icon-button> <mat-icon>edit</mat-icon> </button> </div> </mat-list-option> </mat-selection-list> 当我在浏览器中检查站点时，我可以看到有一个 16px 的填充，它将按钮移动到列表项内的左侧： 我已经尝试通过将其添加到组件的 scss 文件中来删除它： .mat-list-item { padding-right: 0 !important; } 由于某种原因，这没有任何效果。看起来这甚至根本没有应用于该元素。我做错了什么以及如何摆脱这种填充（不会造成任何潜在的不良副作用）？ 请按如下方式使用。会起作用的。 .mat-list-text { padding-right: 0 !important; } 谢谢！ 使用整个选择器（而不是仅仅使用 .mat-list-text，复制上图中突出显示的 css 的所有选择器部分）来删除填充，角度材质很难修改。不要忘记添加 !important 。我以前必须这样做。我希望它也对你有用。 步骤1 在您的 component.ts 文件中添加： encapsulation: ViewEncapsulation.None 步骤2 在你的 css 文件中添加新的类自定义选项： .mat-list-option.mat-list-option.custom-option { .mat-list-text { padding-right: 0px !important; } } 步骤3 在您的 .html 文件中将新类添加到您的 mat-list-option 中： <mat-list-option ... class="custom-option"> （注：这是在 Angular V15 上测试的）
Angular 材料日期选择器：日期解析 UTC 问题 1 天前
我知道有几个关于此问题的线程，我阅读了所有这些线程，但好几天都无法解决此问题。我可能找到了一个解决方案，但它似乎对我来说很脏。 所以和其他用户一样，我也有同样的问题
我正在使用有角材料的日期选择器。我想设置一个默认值，但它没有显示该值。 我正在使用有角材料的日期选择器。我想设置一个默认值，但它没有显示该值。 <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input matInput [picker]="picker" placeholder="Date" autocomplete="off" name="date" formControlName="date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker [startAt]="startDatePicker" #picker></mat-datepicker> </mat-form-field> 这是我的 .js 代码，我想将其设置为默认值 var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); this.form = this.formBuilder.group({ dataInicial: [data_inicial], ... 这对我有用！ HTML- <mat-form-field> <input matInput [matDatepicker]="picker1" placeholder="From Date" [formControl]="date1"> <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1></mat-datepicker> </mat-form-field> TS- date1 = new FormControl(new Date()) 您需要为 startAt 更改提供一个 Date 对象，如下所示： 在.ts中： date = new Date((new Date().getTime() - 3888000000)); 在 html 中： <mat-datepicker [startAt]="date" #picker></mat-datepicker> 这里有一个工作演示：https://stackblitz.com/edit/angular-n9yojx 您可以在输入中使用定义的 formControl。 这里是html <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date" [(ngModel)]="date.value"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> 这里是TS 声明你 formControl date: FormControl; this.date = new FormControl(new Date(<you can provide you date input field if you getting date from other sources>)) 下面是 Angular 10、Angular Material 10 和 Reactive forms 的工作代码 组件.ts this.youForm= this._formBuilder.group({ StartDate: [new Date(), Validators.required], }); component.html 没有变化 <mat-form-field appearance="outline"> <input matInput [matDatepicker]="StartDate" placeholder="Start date *" formControlName="StartDate"> <mat-label>Start Date *</mat-label> <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle> <mat-datepicker #StartDate></mat-datepicker> </mat-form-field> 在一组表单控制器中，您可以使用默认日期，如下所示。 birthdayCtrl: ['1999-01-31'] 使用模板驱动方法，解决方案如下。 selectedDate = new Date(); <input class="form-control" matInput [matDatepicker]="dp3" [min]="today" [max]="max" disabled [(ngModel)]="selectedDate" (ngModelChange)="dateUpdated()" name="currentDate" /> <mat-datepicker-toggle matSuffix [for]="dp3" ></mat-datepicker-toggle> <mat-datepicker #dp3 disabled="false"></mat-datepicker> ``` 在你的.html中---- <mat-form-field style="width:150px;" color="accent"> <mat-label>Choose From Date</mat-label> <input class="example-events" matInput [matDatepicker]="picker1" [ngModel]="dateF" > <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1 ></mat-datepicker> </mat-form-field> 在你的.ts中---- dateF:any=new Date(); ngModel 对我有用... var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input matInput [picker]="picker" placeholder="Date" autocomplete="off" name="date" formControlName="date" [ngModel]="date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker [startAt]="startDatePicker" #picker></mat-datepicker> </mat-form-field> 这是我的答案， 在你的.html中 <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> 在你的.ts中 this.form = this.formBuilder.group({ date: new FormControl(new Date()), // Current Date ... }); 这会将当前日期设置为默认日期。
从 spécifique mat-option 中删除 mat-pseudo-checkbox
在角度材质中，mat-select 具有元素 mat-pseudo-checkbox，它在 mat-option 中显示复选图标。我有多个垫选择，我想删除或隐藏此元素。 和 ::ng-深.mat-
嗨，我正在使用 Angular Material 表作为我的网格，mat-table 在内部扩展单元格高度以调整长文本，但我想保持高度一致并显示省略号。 有什么建议...
如何根据 Angular 中的表单控件值有条件地渲染 mat-select 中的 multiple 属性？
我的 Angular 应用程序中有一个表单，其中包含一个 mat-select 元素，该元素应该允许根据条件进行多项选择。具体来说，我想有条件地包含多个属性...
我使用的是有角度的材质主题，应用了默认的浅色主题，如果 .dark-theme 类位于元素上，则应用深色主题。我遇到了一个问题，虽然有角材料
Angular 16 Reactive Form - 表单控件禁用不起作用
我正在使用 Angular 16 制作一个反应式表单。当选中该复选框时，我想阻止数据输入到其中一个输入，即禁用它。我的代码如下，但是不行，可以吗...
Angular16 已禁用，无法使用reactiveForms
我正在使用 Angular 16 制作一个反应式表单。当选中该复选框时，我想阻止数据输入到其中一个输入，即禁用它。我的代码如下，但是不行，可以吗...
我正在使用 Angular 16 制作一个反应式表单。当选中该复选框时，我想阻止数据输入到其中一个输入，即禁用它。我的代码如下，但是不行，可以吗...
我目前正在使用 Angular Material，想知道是否有办法在没有默认间距的情况下使用复选框。我注意到 Angular Material 的复选框被一些