angular-material2 相关问题

为什么 Angular Material 工具提示会破坏我的单元测试？

我有以下单元测试文件，它是另一个类似组件的工作文件的副本，与样板 Angular CLI 输出相距不远： 导入 { 异步，ComponentFixture，Te...

Angular 6 Mat-Dialog 隐藏了部分后台网页

所以，我一直在使用Mat-Dialog来显示弹出窗口和对话框，我刚刚发现了这个问题。当我向下滚动时，背景页面的一部分（我打开模式的页面）会被隐藏......

预填充垫 - 自动完成 Angular 2 材料 2

当我尝试编辑记录时，无法设置 mat-autocomplete 的值我使用自动完成作为 FormBuilder 对象中的 FormControl 对象并设置从...接收的值

如何在 mat-calendar 更改当天的样式

我尝试向某些日期（日期数组）添加自定义类，有什么建议吗？ （突出显示一些日期 - 活动） html: 我尝试向某些日期（日期数组）添加自定义类，有什么建议吗？ （突出显示一些日期 - 活动） html: <mat-card-content> <div class="date-picker"> <mat-calendar [selected]="selectedDates" (selectedChange)="selectedDates = $event" #calendar> </mat-calendar> </div> ts： this.selectedDates = [new Date('2014-08-28T11:13:59'), new Date('2014-07-27T11:13:59')]; 有什么想法吗？ html: <mat-calendar [minDate]="minDate" [maxDate]="maxDate" [selected]="selectedDates" (selectedChange)="selectedChange($event)" [headerComponent]="displayMonth()" [startAt]="startDate"></mat-calendar> .ts: import { Component, OnInit, Input, OnChanges, ViewEncapsulation, ElementRef, Renderer2 } from '@angular/core'; constructor( private elRef: ElementRef, private renderer: Renderer2 ) {} displayMonth() { let HeaderElsClass = this.elRef.nativeElement.getElementsByClassName('mat-calendar-body-cell'); let orderDate = this.convertDate.dateFormat(this.tempOrdersDate, 'MMMM D, YYYY'); // tempOrderDate is epoch array, i convert from epoch to date for(let index in HeaderElsClass) { if(typeof HeaderElsClass[index] === 'object') { let headerClass = HeaderElsClass[index].getAttribute('aria-label'); orderDate.find(each => { if(each === headerClass) { this.renderer.addClass(HeaderElsClass[index], 'mat-calendar-body-active'); this.renderer.setStyle(HeaderElsClass[index], 'font-weight', '900'); } return false; }) } } } 这在我的代码中运行良好。我希望对你有用。 谢谢阿卜杜拉

$font-family 是 Angular 17 和 Material 17 中的“未定义变量”

我遵循了有关从以前版本迁移到新版本的 Angular 和 Material 文档，但遇到了一个对我来说没有意义的问题。看一下官方文档...

升级到 Angular v18 后，Angular Material 主题样式不起作用

我正在尝试从 v16 - v17 然后更新我的应用程序 v18。在案例 17 和 18 中，我发现材质主题 css 不起作用。侧面板、按钮、下拉菜单等组件没有

Angular：在 mat-table 中使用 ng-content 进行 matSort

我正在尝试创建一个可重用的垫表组件，具有分页、排序和搜索功能。我制作的可重用组件显示一些简单的列，并根据情况投影一些自定义列...

Angular 5 在单击或悬停在任意位置之前不会渲染组件

我现在遇到这个问题，这让我很头疼，我不知道问题出在哪里。 我有一个名为 device-form 的表单，它是使用路由从仪表板调用的。该设备...

角度材质 - 带图像的 mat-optgroup

尝试找出以下是否可行： https://material.angular.io/components/select/examples （请参阅“使用选项组进行选择”） 在选择的组件中使用 Angular Material 组是...

使用动态列排序 - Angular 材料

我正在使用这个URL并且我正在排序。排序工作正常，但是，我有 2 个数字列 权重 - 它的值通过 API 调用来自数据库，并且存在于数据源中。 （这里，排序是

如何从 <mat-chip-option>

我想删除的切换效果。当我单击“Accent Fish”芯片（此处为视频）时，它应该如视频中所示被选中，但是当我再次单击它时......

材质角度手风琴标题/标题高度

所以我一直在尝试在我的 Web 应用程序开发中采用 Materials Accordion。 然而，随着内容的增长，使标题的大小扩大会遇到一些麻烦。 我的标题预计...

Angular-Material2：垂直对齐文本和 md-icon 以匹配垂直样式？

我知道我可能在这里遗漏了一些东西。我正在尝试垂直对齐 md-icon 和一些文本，现在“示例文本”一词显示在图标下方。 家 我知道我可能在这里遗漏了一些东西。我正在尝试垂直对齐 md-icon 和一些文本，现在“示例文本”一词显示在图标下方。 <div> <md-icon>home</md-icon> Sample Text </div> 输出： 我确实尝试使用跨度在示例文本上进行垂直对齐，但无法让任何东西正常工作，而且无论如何都感觉有点hacky。 有人知道如何达到这个效果吗？ 这是使用<md-icon>时的常见问题。要对齐图标和文本，您可以将文本放在跨度内并对其应用样式： <div> <md-icon>home</md-icon><span class="aligned-with-icon">Sample Text</span> </div> 在你的component.css中： .aligned-with-icon{ position: absolute; margin-top: 5px; margin-left: 5px; /* optional */ } 如果您要将多个图标放在同一个 div 中，也可以使用 relative 位置。这是CSS： .aligned-with-icon-relative{ position: relative; top: -5px; margin-left: 5px; /* optional */ } 另一种选择是在外部 div 上使用 flex 显示，并使用 align-items 到 center： 在你的html中： <div class="with-icon"> <md-icon>home</md-icon>Sample Text </div> 在你的CSS中： .with-icon { display: flex; align-items: center; } 这是一个 Plunker 演示 我使用 inline 属性。 这将使图标根据按钮的大小正确缩放。 <button mat-button> <mat-icon inline=true>local_movies</mat-icon> Movies </button> <!-- Link button --> <a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a> 我将此添加到我的 styles.css 中： 解决按钮内图标垂直对齐问题 与按钮文本相比，材质图标字体总是有点太小了 button.mat-button .mat-icon, a.mat-button .mat-icon, a.mat-raised-button .mat-icon, a.mat-flat-button .mat-icon, a.mat-stroked-button .mat-icon { vertical-align: top; font-size: 1.25em; } 你可以使用 div { display: flex; vertical-align: middle; } 或 span { display: inline-flex; vertical-align: middle; } 这可以使用 CSS flexbox 来实现 <!-- HTML part --> <div class="outer-div"> <mat-icon>home</mat-icon> <span>Home</span> </div> <!-- CSS part --> .outer-div { display: flex; flex-direction: column; align-items: center; } .outer-div > span { font-size: 10px; } 我必须说，这么简单的事情应该可以开箱即用。 但您可以使用 position: absolute 将图标垂直居中，如下所示： 您可以在这里找到演示 button { /* manually making space for mat-icon because mat-icon is not position: absolute */ padding-left: 30px; } ::ng-deep .mat-icon{ font-size: 16px !important; /*change this as per your needs*/ position: absolute; top: 50%; transform: translate(-22px, -50%); /*centering image inside mat-icon box*/ display: flex !important; justify-content: center; align-items: center; } 按照@rynop给出的答案，但对于简单的div的情况，将其放入src\styles.scss足以修复对齐： .mat-icon.mat-icon-inline:not(:only-child) { vertical-align: top; }

将带有 mat-expansion-panel 的组件添加到 mat-accordian

我有一个带有垫子扩展组件的组件，我想将该组件放置在垫子手风琴中。除了样式之外，这都有效。 我有一个带有 mat-expansion-component 的组件，我想将此组件放在 mat-accordian 中。除了样式之外，这都有效。 <mat-accordion> <app-panel1></app-panel1> <app-panel2></app-panel2> </mat-accordion> app-panel.html panel1 和 panel2 具有相同的格式。 <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> <mat-expansion-panel-header> <mat-panel-title> Title </mat-panel-title> <mat-panel-description> Description </mat-panel-description> </mat-expansion-panel-header> <ng-template matExpansionPanelContent> Content </ng-template> </mat-expansion-panel> 发生了什么： 我想要什么： 取自角度材料文档 您的问题来自： .mat-accordion .mat-expansion-panel:last-of-type { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .mat-accordion .mat-expansion-panel:first-of-type { border-top-right-radius: 4px; border-top-left-radius: 4px; } 既然这样显示，那就是在申请开始和结束 <app-panel1> <mat-expansion-panel></mat-expansion-panel> </app-panel1> 因此您可以在组件中覆盖该属性，使其不被应用。例如在 app-panel1.component.scss :host{ .mat-expansion-panel:last-of-type { border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; } } 但这也会破坏需要圆角矩形的扩展情况下的样式。

为什么使用自定义全局验证器时，mat-error 不会显示在 Angular Material 6 中的 mat-form 字段内

我正在使用角材料6，我在mat-form-field内有一个验证，当在mat-form-field之后移动到正确显示的mat-error时，不显示mat-error。 无效代码：...

mat-slide-toggle 不应更改其状态

当我检查滑动开关时，它应该按预期工作。但是当我尝试取消选中它时，会出现一个确认窗口，询问您是否确定。当我在确认窗口中单击“取消”时，仍然...

角料滑块降序运动

有没有办法将滑块从 100 移动到 1，而不是从 1 移动到 100 目前我看到我们只有一个 min 属性和 max 属性，因此滑块值按升序移动 https://

MatDatePicker 从周一开始一周

有什么方法可以将 md-datepicker 配置为从星期一开始一周？默认情况下，它从周日开始，并且没有任何指定由谁来更改此设置。

如何在 ngx-mat-datetime-picker 中自定义日期和时间格式？

我正在研究 Angular7 及其兼容的 ngx-mat-datetime-picker。它按预期工作。 想要自定义格式： 实际：月/日/年，时:分:秒 预期：yyyy-mm-dd hh:mm:ss 目前我不...

为什么 Angular Material 默认样式会以覆盖自定义主题的方式加载？

我正在尝试学习 Angular Material，但我发现文档不准确或不完整。根据版本 17 的文档，我的主工具栏应该有黄色背景： 风格...