angular-material2 相关问题

如何将自定义类添加到 Angular Material 选项卡？

在 Angular 6 中，我使用 Angular Material 通过选项卡显示一些数据。 在 Angular 6 中，我使用 Angular Material 通过选项卡显示一些数据。 <mat-tab-group> <mat-tab *ngFor="let bar of foo.bar" [label]="bar.Name" [ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'"> // ... </mat-tab> </mat-tab-group> 我想以不同的方式设置选项卡的样式，无论 bar 的 IsActive 属性是 true 还是 false。 我尝试过使用[ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'"，如上所示，但未添加该类。 出于恶意，我尝试了更简单的class = 'bar-on'，但即使如此，该类也没有添加。 因此，我想知道，是否可以将自定义类添加到 Angular Material 选项卡？ 编辑： IsActive 属性是 foo 对象的属性。它与选项卡的激活状态无关。活动选项卡可以显示带有 IsActive = false 的对象，反之亦然。 是的，可以使用 ng-template 而不是 label。 第一个选项卡上的 ngClass 示例。 堆栈闪电战 <mat-tab-group> <mat-tab > <ng-template mat-tab-label> <span [ngClass]="{'color-red': isError?'red':'black'}">Security</span> </ng-template> Content 1 </mat-tab> <mat-tab label="Second"> Content 2 </mat-tab> <mat-tab label="Third"> Content 3 </mat-tab> </mat-tab-group> 看起来 Angular 在 4 多年前就是一团糟，因为这里的所有答案在今天都不适用。在 2023 年，如果您想向选项卡触发器本身或绑定到的容器添加一些自定义类，您只需分别使用 labelClass 和 bodyClass，如 docs 中所述 如果您想修改活动选项卡，请使用以下命令： .mat-tab-label-active { //your style here } 如果您想修改活动选项卡中的标签样式，请执行以下操作： .mat-tab-label-active .mat-tab-label-content { //your style here } 通过属性定位元素来应用样式 :host::ng-deep .mat-tab-label[aria-posinset='1']{ /*apply your css here*/ } 似乎 <mat-tab> 元素已被删除，因此如果您想为其添加 CSS 类，只需将选项卡内容包装在另一个 div 中并将该类添加到该 div 即可。 我使用的是Angular 11 atm，标签类功能是后来引入的，所以我必须采取不同的做法。 但一般来说，对于 Angular 13+，这应该可以通过使用 @Input [labelClass]="my-classname" 实现。 https://material.angular.io/components/tabs/api 如果您需要对来自第 3 方导入的元素进行样式设置，最好使用 ::ng-deep，而不是 encapsulation: ViewEncapsulation.none。 您可以 .. 而不是使用 [ngClass] 突出显示活动选项卡 .mat-tab-label-active{ //your code... } 看到这个：https://stackoverflow.com/a/45962498/5319180 另外：https://github.com/angular/material2/issues/5014 编辑：获取域特定信息，正如您所说..也许这会有所帮助？ <mat-tab *ngFor="let bar of bars"> <ng-template mat-tab-label> <div [ngClass]="...your conditions"> bar.heading </div> </ng-template> ... ... </mat-tab> 或者你可以使用::ng-deep，谷歌一下。

覆盖角度材质排版边距

似乎应用显示类（例如 mat-display-1）也会向元素添加 margin-bottom css。创建自定义主题时，我知道如何覆盖大小、行高和粗细，但...

路由器锚点滚动不适用于 Material 的 mat-sidenav-container[全屏]

RouterModule 锚点滚动是基于视口可滚动区域的，因为 mat-sidenav-container 在与全屏属性一起使用时将 ifself 设置为 100% 高度，因此不会出现视口溢出

自动完成 - 以编程方式选择选项

我在尝试以编程方式选择自动完成选项时遇到问题。 MatAutocomplete 没有 select 方法，所以我尝试在 MatOption 上使用 select 方法。这不适用...

在任何按钮上单击内部关闭角度材料侧导航

我的应用程序上有一个 Angular 4 Material Sidenav，里面有一堆按钮，其中一些按钮调用函数，另一些则路由到其他页面。 除了让每个按钮都调用...

在 Angular Material 2 表中使用虚拟滚动和@angular/cdk-experimental

我有一个表显示很多行，我想优化它的性能。我通过使用虚拟滚动技术找到了解决方案。这是 Angular Material CDK Virtual Scroll Vi 的示例...

多个 Angular Material 主题：获取 sass 地图属性始终返回旧的、缓存的值

对于多个 Angular Material 主题，其想法是拥有一个 scss 属性，每个主题具有不同的值。我想从 mixin 中访问这个 sass 映射属性，就像本技术中所做的那样......

ts 文件中的 autocomplete.options 仅在有多个下拉列表时提供第一个下拉列表中的选项

我的应用程序有多个下拉菜单，全部使用 mat-autocomplete 实现。我对 matAutocomplete 属性使用了唯一值，而且我也设置了不同的 formControlName。仍然得到相同的选项

防止 mat-option 选择 if 条件

我想阻止选择 mat-option，因为单击它会打开一个对话框。仅当从对话框中选择某些内容时，才应选择我的选项。如果没有选择任何内容...

如何在 angular2/material 上将 mat-cell 内容与图标右对齐？

从我的代码开始： {{'companies.edit-column'|翻译}} ...

Angular 5 Angular Material 2 - 使用 minLength 自动完成

我在表单上添加了自动完成字段以选择患者。 患者数据来自数据库。问题是有 40,000 名患者 所以我想在用户输入后加载数据...

NG01203：mat-radio-group 的表单控件名称没有值访问器

单元测试失败，显示 Error: NG01203: No value accessor for form control name : 'gender' 。我已经使用了 NG_VALUE_ACCESSOR 但仍然相同。我正在使用响应式表单，HTML 代码是 单元测试失败，提示 Error: NG01203: No value accessor for form control name : 'gender' 。我已经使用了 NG_VALUE_ACCESSOR 但仍然相同。我正在使用响应式表单，HTML 代码是 <mat-radio-group aria-label="Select an option" class="w-48" id="gender" name="gender" formControlName="gender" > <mat-radio-button value="Male" name="male">Male</mat-radio-button> <mat-radio-button value="Female" name="female">Female</mat-radio-button> </mat-radio-group> 我在这里做错了什么 { provide: NG_VALUE_ACCESSOR, useExisting: myComponent, multi: true } 确保您拥有正确的值访问器： 验证您使用的是正确的值访问器令牌 (NG_VALUE_ACCESSOR) 并且它与您的自定义表单控件实现相匹配。 检查您的自定义表单控件： 确保您已在自定义表单控件组件中正确实现了 ControlValueAccessor 接口。 import { Component, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ selector: 'app-custom-radio-group', template: ` <mat-radio-group [value]="value" (change)="onChange($event)"> <ng-content></ng-content> </mat-radio-group> `, providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomRadioGroupComponent), multi: true, }, ], }) export class CustomRadioGroupComponent implements ControlValueAccessor { value: any; onChange: (value: any) => void = () => {}; onTouched: () => void = () => {}; writeValue(value: any): void { this.value = value; } registerOnChange(fn: (value: any) => void): void { this.onChange = fn; } registerOnTouched(fn: () => void): void { this.onTouched = fn; } } 确保您的自定义表单控件正确实现 ControlValueAccessor 接口并提供 NG_VALUE_ACCESSOR。 检查您的测试配置： 例如： TestBed.configureTestingModule({ declarations: [CustomRadioGroupComponent, YourComponent], // Include your custom form control and your component imports: [ReactiveFormsModule, MatRadioModule], }).compileComponents(); 检查测试 HTML： 在您的测试 HTML 模板中，确保您正确使用自定义表单控件： <app-custom-radio-group formControlName="gender"> <mat-radio-button value="Male">Male</mat-radio-button> <mat-radio-button value="Female">Female</mat-radio-button> </app-custom-radio-group> 请验证这些方面，如果问题仍然存在，请提供有关自定义表单控件实现和测试设置的更多详细信息，以便我可以帮助您。

Angular2 应该使用什么版本的 Angular 材质？

我开始学习 Angular 2。我尝试在我的示例应用程序中使用 Angular 材料。我已经使用此命令“npm install --save @angular/material”安装了角度材料。我

cdkDropListSortingDisabled 属性无法绑定，因为它是 cdkDropList 指令的未知属性。有角材料

所以我想实现一个用例，我想使用拖放将一些数据从一个区域（div）复制到另一个区域，我通过在网上冲浪发现Angular/Material2可以完成这项工作，通过消费...

移除选项卡组的下边框

我想删除选项卡组的底部边框，下图中为灰色。 这是一个显示代码的示例项目： https://stackblitz.com/edit/angular-tabs-remove-bottom-border

是否有 Angular 材质图标库[已关闭]

是否有 Angular Material 的图标列表或库？因为他们在官方网站上使用了一个，但我找不到列表。这里fontIcon=“home” 是否有 Angular Material 的图标列表或图标库？因为他们在官方网站上使用了一个，但我找不到列表。这里fontIcon=“home” <mat-icon aria-hidden="false" aria-label="Example home icon" fontIcon="home"></mat-icon> 我认为这解决了您的问题，它有图标预览 https://www.angularjswiki.com/angular/angular-material-icons-list-mat-icon-list/

如何使输入区域适合角度文本？

我想要一个输入区域来容纳其中的文本。 我的代码： qwerty <... 我想要一个输入区域来容纳其中的文本。 我的代码： <mat-card> <fieldset> <legend>qwerty</legend> <div> <div> <label>Qwerty Asdf</label> <mat-form-field> <input matInput disabled="true" name="type" value="qwerty" /> </mat-form-field> </div> <div> <label>Foo Bar</label> <mat-form-field> <input matInput disabled="false" name="type" value="baz" /> </mat-form-field> </div> <div> <label>E Makarena</label> <mat-form-field> <input matInput disabled="false" name="type" value="asdsadsadsadsadsaadsad" /> </mat-form-field> </div> </div> </fieldset> </mat-card> 上面代码的结果是： 我尝试将输入宽度设置为 auto 或 100% 或 fit-content 但这不会改变任何事情。 尝试https://material.angular.io/components/input/api中提到的指令matTextareaAutosize 这应该正是您正在寻找的。 单独使用 CSS 无法完成，因为 CSS 不知道用户输入。它必须通过 JavaScript 来完成。 如果您只对通过纯CSS“增加输入字段的宽度”感兴趣，那么您可以这样做： 使输入字段变得非常宽 设置 CSS 样式以在键入的文本下划线（请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration） 这应该会产生与“自动扩展”类似的效果，但可能与材料设计不一致 我们所做的是创建一个具有相同值的隐藏 div。 然后，我们创建了一个名为 dynamicWidth 的指令，它获取任何元素的宽度并添加下面的 [(fluidWidth)] 的宽度。 <input dynamicWidth [style.minWidth.px]="inputRef + 25" [style.width.px]="inputRef + 25" /> value这里是任何文字或参考。确保这是隐藏的。 <div dynamicWidth aria-hidden="true" [valueText]="value" [innerHTML]="value" [(fluidWidth)]="inputRef"> </div>

更改角度材质datePicker图标

我想知道是否可以更改使用角度材料的datePicker显示的图标。 这是角度材料文档中的代码。 我想知道是否可以更改使用 Angular Material 的 datePicker 显示的图标。 这是角度材料文档中的代码。 <md-input-container> <input mdInput [mdDatepicker]="picker" placeholder="Choose a date"> <button mdSuffix [mdDatepickerToggle]="picker"></button> </md-input-container> <md-datepicker #picker></md-datepicker> 有办法实现吗？ 您可以在 mat-datepicker-toggle 中添加 mat-icon 自定义 <input matInput [matDatepicker]="dp" placeholder="Select minimum date" disabled> <mat-datepicker-toggle matSuffix [for]="dp"> <mat-icon matDatepickerToggleIcon>arrow_drop_down</mat-icon> </mat-datepicker-toggle> <mat-datepicker #dp disabled="false"></mat-datepicker> 您可以通过覆盖 background 类的 mat-datepicker-toggle 属性来做到这一点。添加您想要的 asset 文件夹中的图标路径。 以下是在 calender 中将 alert.png 图标替换为 src > asset > img 图标的示例： >>> .mat-datepicker-toggle { background: url("../../assets/img/alert-circle-24.png") no-repeat !important; } html: <md-input-container align="end"> <input mdInput [mdDatepicker]="datepicker" [(ngModel)]="date"> <button mdSuffix [mdDatepickerToggle]="datepicker"></button> </md-input-container> 您可以在 中添加您自己的图像 <mat-datepicker-toggle matSuffix (click)="openCalendar()"> <mat-icon matDatepickerToggleIcon> <img src={{imageSource}}> </mat-icon> </mat-datepicker-toggle> 您可以使用 svg 来自定义图标，如下所示： <mat-form-field style="width: 100%; margin-top: 16px;"> <mat-label style="font-size: 16px;">Date</mat-label> <input matInput [matDatepicker]="protocolIssueDate" formControlName="protocolIssueDate"> <mat-datepicker-toggle matSuffix [for]="protocolIssueDate"> <mat-icon matDatepickerToggleIcon> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 4L9 4V6L15 6V4L17 4V6L20 6V14H18V8L6 8L6 18H14V20H4L4 6H7V4Z" fill="black" fill-opacity="0.38"/> <path d="M10 12V10H8V12H10Z" fill="black" fill-opacity="0.38"/> <path d="M14 10L12 10V12L14 12V10Z" fill="black" fill-opacity="0.38"/> <path d="M10 16V14L8 14V16L10 16Z" fill="black" fill-opacity="0.38"/> </svg> </mat-icon> </mat-datepicker-toggle> <mat-datepicker #protocolIssueDate startView="month" [startAt]="startProtocolIssueDate"></mat-datepicker> </mat-form-field> 检查这个https://stackblitz.com/edit/angular-ivy-xc5wkd?file=src%2Fapp%2Fapp.component.ts 在 Material 图标字体之外自定义图标，这种方法对于开发人员来说将更加可重用且清晰。 <mat-form-field class="custom-mat-form-field" appearance="fill"> <mat-label>Choose a date 1</mat-label> <input matInput [matDatepicker]="picker1" /> <mat-hint>MM/DD/YYYY</mat-hint> <mat-datepicker-toggle matSuffix [for]="picker1"> <!-- this icon is outside of Material icons font --> <mat-icon svgIcon="date_check_in" matDatepickerToggleIcon></mat-icon> <!-- you can check how do this in the link above --> </mat-datepicker-toggle> <mat-datepicker #picker1></mat-datepicker> 结果： 角度13 matDatepickerToggleIcon 解决方案对我不起作用，因为我想要一个自定义图标。我必须使用 CSS： .mat-datetimepicker-toggle, .mat-datepicker-toggle { .mat-icon { background-image: url('../../assets/images/calendar.svg'); background-position: 5px 2px; background-repeat: no-repeat; svg { display: none; } } }

方向：rtl 不适用于角度材质卡？

我正在使用角度材质卡，并且想让文本从右向左开始，所以我使用了 Direction: rtl;但这没用。 有什么帮助吗？ HTML 代码： &...

<mat-select>空间不足。如何添加多行<mat-option>？

我想在选项文本下添加描述该选项的行。 默认情况下，mat-select 限制字符数并在行末尾添加“...”。我想要多行