angular-material 相关问题

使用角度材质选项卡闪烁选项卡内容

我有一个动态选项卡内容，从一个选项卡移动到另一个选项卡时，选项卡内容闪烁。 我有一个动态选项卡内容，从一个选项卡移动到另一个选项卡时，选项卡内容闪烁。 <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 天前

我知道有几个关于此问题的线程，我阅读了所有这些线程，但好几天都无法解决此问题。我可能找到了一个解决方案，但它似乎对我来说很脏。 所以和其他用户一样，我也有同样的问题

使用角度 5 设置角度材质 datePicker 的默认值

我正在使用有角材料的日期选择器。我想设置一个默认值，但它没有显示该值。 我正在使用有角材料的日期选择器。我想设置一个默认值，但它没有显示该值。 <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 mat-table 无法使单元格文本省略

嗨，我正在使用 Angular Material 表作为我的网格，mat-table 在内部扩展单元格高度以调整长文本，但我想保持高度一致并显示省略号。 有什么建议...

如何根据 Angular 中的表单控件值有条件地渲染 mat-select 中的 multiple 属性？

我的 Angular 应用程序中有一个表单，其中包含一个 mat-select 元素，该元素应该允许根据条件进行多项选择。具体来说，我想有条件地包含多个属性...

Angular 材质组件不继承类

我使用的是有角度的材质主题，应用了默认的浅色主题，如果 .dark-theme 类位于元素上，则应用深色主题。我遇到了一个问题，虽然有角材料

Angular 16 Reactive Form - 表单控件禁用不起作用

我正在使用 Angular 16 制作一个反应式表单。当选中该复选框时，我想阻止数据输入到其中一个输入，即禁用它。我的代码如下，但是不行，可以吗...

Angular16 已禁用，无法使用reactiveForms

我正在使用 Angular 16 制作一个反应式表单。当选中该复选框时，我想阻止数据输入到其中一个输入，即禁用它。我的代码如下，但是不行，可以吗...

Angular16 已禁用，无法使用反应形式

我正在使用 Angular 16 制作一个反应式表单。当选中该复选框时，我想阻止数据输入到其中一个输入，即禁用它。我的代码如下，但是不行，可以吗...

如何在没有额外间距的情况下使用角度材质复选框？

我目前正在使用 Angular Material，想知道是否有办法在没有默认间距的情况下使用复选框。我注意到 Angular Material 的复选框被一些

带有 mat-nav-list 的 Angular Material 扩展面板的对齐问题

我使用 mat-nav-list 来显示菜单项，第四个菜单项是 Angular Material Expansion 控件。我在这里缺少对齐方式。其屏幕截图如下。 编辑 相关代码是

在 Angular 中单击 Mat-Expansion-Panel 标题时更改其背景颜色

下面是我在 Angular 15 和 Angular Material 14 中使用的代码 下面是我在 Angular 15 和 Angular Material 14 中使用的代码 <mat-nav-list role="list"> <a mat-list-item role="listitem" class="list-item-setting" id="emailTemplatesId" *ngIf="isSysAdmin" (click)="sideNavLink(true, $event)" matTooltip="Notification Templates" matTooltipPosition="right" [matTooltipDisabled]="!isCompressed" [routerLink]="['/email-notification-templates']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" class="admin-link"> <mat-icon class="list-item-setting">email</mat-icon> <span class="nowrap add-padding">Email Templates</span> </a> <a > <mat-accordion *ngIf="isAdmin && !isCSR"> <mat-expansion-panel hideToggle [(expanded)]="panelOpenState" class="mat-elevation-z0"> <mat-expansion-panel-header> <mat-panel-title style="text-align: left;" (click)="clickNotificationMgmt($event)"> <img src="../../../../assets/images/icon_bell.svg" alt="Notification Management"> <span class="add-padding-to-mat-panel-header"><a class="list-item-setting add-padding" [routerLink]="['/notification-list']" routerLinkActive="active">Notification Management</a></span> </mat-panel-title> </mat-expansion-panel-header> <div> <mat-panel-description (click)="clickNotificationList($event)" [ngClass]="isNotificationListClicked ? 'bold' : ''" id="notificationListId" (click)="sideNavLink(true, $event)" class="mat-panel-description-setting"><a class="list-item-setting add-padding" [routerLink]="['/notification-list']" routerLinkActive="active">Notification List </a></mat-panel-description> </div> </mat-expansion-panel> </mat-accordion> </a> </mat-nav-list> 以下是Email Templates的截图 这里 Notification Management 是一个垫子扩展面板 - 手风琴控件。 如何以与 Email Templates 相同的方式显示 Notification Managment，我的意思是单击它时具有相同的背景颜色，如果用户导航离开它，那么它应该返回正常状态而不突出显示。 编辑 现在整个 Accordion 控件正在更改背景颜色。我只需要它来获取 Notification Management 标题。我们怎样才能实现这个目标..？ 任何帮助将不胜感激。 您已经在使用 expanded 属性来设置 panelOpenState。那么，如何在 ngClass 中使用 panelOpenState 呢？ 类似的东西： <mat-expansion-panel [(expanded)]="panelOpenState" [ngClass]="{'active-panel': panelOpenState}"> 然后只需在 css 中设置 active-panel 类即可： .active-panel { background-color: /* your desired color */; }

材料注册表中的角度加载图标未预加载

我已经在app.component中注册了一些svg 公共静态 MAT_ICONS_TO_REGISTOR: { 名称: 字符串, url: 字符串 }[] = [ {name: '扫帚', url: '../assets/imgs/broom.svg'}, {名称：'来源图标...

格式为 MM.yyyy 的 Angular 日期选择器想要选择日期

我想使用只接受月份和年份的日期选择器。根据 Angular Materials，我构建了一个函数，该函数应该在选择月份后关闭日期选择器 - 这样就不会出现任何一天...

Mat 日期选择器发送了错误的日期

我有此输入用于选择日期 {{“日期”|翻译}} ...

我使用 mat-slide-toggle 但它没有像角度/材料文档中那样显示

这是角度材料文档 这是我的项目中 为什么我不能像第一张图片那样进行滑动切换。 我需要像角度材料文档中那样显示滑动切换...

如何更改 Angular mat-checkbox 组件的标签字体大小？

我正在尝试更改 mat-checkbox 标签的字体大小。我似乎没有尝试任何工作，因为它始终被组件的默认样式覆盖： ！重要的 ::ng-深 设置...