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 限制字符数并在行末尾添加“...”。我想要多行

如何更新角度材质

将项目中的角度材质更新到最新版本[email protected]的最佳方法是什么？ 我试过： npm install --save @Angular/Material @Angular/cdk

Angular5 - TypeError：无法读取未定义的属性“模板”

我使用 Angular [email protected] 在 mat-table 中的每一行添加了 EDIT、DELETE 和 DETAILS 按钮。 所有按钮都可以使用，但是， * 我收到错误“无法读取

Angular Material 单选按钮组需要验证不起作用

我试图在用户单击“提交”时验证单选按钮组。文本字段和下拉列表在无效时显示红色，但单选按钮颜色在无效时不会更改。有什么建议吗？...

如何在 Angular 中通过自定义指令添加 mattooltip

我正在创建一个名为 TooltipDirective 的自定义指令，它将向每个主机元素添加 matTooltip，代码如下 从 '@

带有可重复使用的表单组件的角度材料步进器

我正在尝试通过创建一个表单组件来实现一个角度材质步进器，该组件可以作为多个较大表单的步骤插入。 例如，假设我有 N 个表格，第一个......

ngx mat 日期时间选择器中缺少复选框确认按钮

我在 Angular 15 中遇到了 ngx mat 日期时间选择器的样式问题，这就是这个包。 https://www.npmjs.com/package/@angular-material-components/datetime-picker 所以我添加了 @导入“https://...

Angular 材质 Flex - 在 fxLayout 中滚动

我真的很挣扎于我认为是一个简单的问题.. 我有一个页眉、一个内容区域和一个页脚，我正在使用 fxLayout，最简单的是： 我真的在努力解决我认为是一个简单的问题.. 我有一个页眉、一个内容区域和一个页脚，我正在使用 fxLayout，最简单的是： <div style="height:100vh;" fxLayout="column"> <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center"> <div fxFlex="none">header</div> <div fxFlex="auto"> <h1>Title here</h1> <div fxLayout="column" style="overflow-y:auto"> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> </div> <div fxFlex="none" style="background:green;">footer</div> </div> </div> 我不明白的是为什么红色容器不在页眉和页脚之间滚动。 这里是Stackblitz 我真的不想向父 div 添加 height:100vh，因为这会破坏其他页面，即使我这样做，它仍然无法按我的预期工作。 真的希望有人能对此有所启发。 提前谢谢您！ 设置容器div的高度并删除fxLayout="column"，如下所示 - <div style="overflow-y:auto; height:100px"> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> 更新 如果您的页眉和页脚是固定大小（在下面的示例中为 100px），那么您可以使用 calc()- <div style="overflow-y:auto; height:calc(100vh - 100px)"> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> 您还可以为 div 设置 top 和 bottom 并将位置设置为 fixed。 div 需要一些信息（高度、顶部、底部等）才能使其可滚动 - <div style="overflow-y:auto; position:fixed; top:50px; bottom:50px; width:100%"> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> 如果你一直使用 fxLayout，它会起作用： <div style="height:100vh;" fxLayout="column"> <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center"> <div fxFlex="none">header</div> <div fxFlex="auto" fxLayout="column"> <h1>Title here</h1> <div fxFlex style="overflow-y:auto"> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> </div> <div fxFlex="none" style="background:green;">footer</div> </div> </div> 堆栈闪电战 我如何得到这个解决方案： 第1步： <div style="height:100vh;" fxLayout="column"> <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center"> <div fxFlex="none">header</div> <div fxFlex="auto" fxLayout="column"> <!-- continue using fxLayout --> <h1>Title here</h1> <div fxFlex fxLayout="column" style="overflow-y:auto"> <!-- add corresponding fxFlex to child --> <div fxFlex> <!-- add a div that can 'flex' --> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> </div> </div> <div fxFlex="none" style="background:green;">footer</div> </div> </div> 第2步： <div style="height:100vh;" fxLayout="column"> <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center"> <div fxFlex="none">header</div> <div fxFlex="auto" fxLayout="column"> <h1>Title here</h1> <div fxFlex fxLayout="column"> <!-- move overflow style from here... --> <div fxFlex style="overflow-y:auto"> <!-- ... to here --> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> </div> </div> <div fxFlex="none" style="background:green;">footer</div> </div> </div> 步骤3： <div style="height:100vh;" fxLayout="column"> <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center"> <div fxFlex="none">header</div> <div fxFlex="auto" fxLayout="column"> <h1>Title here</h1> <!-- <div fxFlex fxLayout="column"> --> <!-- remove unneeded div --> <div fxFlex style="overflow-y:auto"> <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> <!-- </div> --> </div> <div fxFlex="none" style="background:green;">footer</div> </div> </div> 解决方案： <div style="height:100vh;" fxLayout="column"> <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center"> <div fxFlex="none">header</div> <div fxFlex="auto"> <h1>Title here</h1> <div style="overflow-y:auto; height: 300px;"> // <== look here <div style="height:3000px;background:red;"> Why is doesn't this scroll? </div> </div> </div> <div fxFlex="none" style="background:green;">footer</div> </div> </div>

防止按下退出按钮时关闭角度材质对话框，但允许在单击背景时关闭

默认情况下，按下 esc 按钮时，对话框将关闭。但是，我不想要这种预期的行为。 我想要发生的是防止按下 esc 按钮时关闭，但...

Angular 材料分页器无法工作

我正在尝试在我的应用程序上添加 Angular Material Paginator。 MatPaginatorModule 添加到模块中。 我正在尝试在我的应用程序上添加 Angular Material Paginator。 MatPaginatorModule 添加到模块中。 <mat-paginator #paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"> </mat-paginator> 但是它给出了一个错误： 未捕获的错误：模板解析错误： 无法绑定到“长度”，因为它不是已知的属性 “垫分页器”。 如果 mat-paginator 是 Angular 组件并且具有 length 输入，则验证它是否属于此模块。 如果 mat-paginator 是 Web 组件，则将 CUSTOM_ELEMENTS_SCHEMA 添加到该组件的 @NgModule.schemas 以抑制此消息。 也许我错过了什么？ "@angular/animations": "^5.0.1", "@angular/cdk": "^5.0.0-rc0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/material": "^5.0.0-rc0", 以防万一其他人遇到这个问题，只需在 app.module.ts 中导入模块即可 import { MatPaginatorModule } from '@angular/material/paginator'; 和 @NgModule({ ... imports: [ .... MatPaginatorModule ] 我注意到一件事我认为我应该提到，它可能有用也可能没用。 如果您使用的是 Angular Materials 版本 5，则分页器模块位于 import {MatPaginatorModule} from '@angular/material'; 但是从 Angular 8 开始，它出现在 import {MatPaginatorModule} from '@angular/material/paginator'; 一定要在 app.module.ts 中添加该模块 import {MatPaginatorModule} from '@angular/material/paginator'; 对我来说，还需要 MatChipsModule 来编译。 import { MatChipsModule } from '@angular/material/chips'; 我昨天正在努力解决这个问题，我找到了解决方案，即向 project.module.ts 文件添加必要的记录。我认为你应该做这样的事情。 import { NameOfYourComponent } from './path_to_your_component/nameofyour.component'; ... @NgModule({ declarations: [ NameOfYourComponent , ... 我也是。我对 Angular Material 也有同样的问题 从“@angular/material/paginator”导入{MatPaginatorModule}； @NgModule({ 声明：[ 应用程序组件， ... ], 进口：[ MatPaginator模块， ... ] 我的 html 文件中的标签 Angular Materia 不起作用。 。请帮忙

mat-tab 删除 tab-body DOM 但不隐藏它

场景： 我使用的是角度材料选项卡，每个不同的选项卡都有各自的动态组件。 因此，当我切换选项卡时，它会从 DOM 中删除内容。当我再次回来时...

markAsUntouched 未清除红线

我正在使用 Angular Material 的反应形式。 当我单击 onsubmit() 时，我希望所有没有值的参数不会显示错误（红线） 我尝试使用 this.formGroup.markAsUntouched...

角度材料表错误：无法绑定到“mdHeaderRowDef”，因为它不是“md-header-row”的已知属性

我正在尝试将 CDK 数据表转换为 Material Design 样式的数据表（请参阅：https://material.angular.io/components/table/overview），但是当我将 cdk 前缀更改为md，我得到以下...

无法在 _closeDialogVia dialog.mjs 中设置 null 的属性（设置“_closeInteractionType”）

在这里输入图片描述 将应用程序的材料迁移到 15 版本后，matdialog（内置关闭按钮）不工作并抛出以下错误： `错误类型错误：无法设置

通过@Input 参数传递日期不会影响角度材料日期范围选择器中的 [max] 指令

当通过 @Input 将日期传递给 [max] 指令时，日期选择器不会对传递的值做出反应。 下面的组件代码 @成分（{ 选择器：'范围选择器'， templateUrl: '范围选择器.