angular-material 相关问题

垫选择选择更改获取组角度

我有两个 mat-optgroup 组来控制 mat-select 它有一个事件处理程序 (selectionChange)="applicationSelected($event.value, i)。 如何检测从哪个组中选择了选项？

错误：在构建 Angular Lib 项目 Angular 13 时无法将类型实体 i10.BidiModule 解析为符号

我在构建 Angular Lib 项目时遇到错误：无法将类型实体 i10.BidiModule 解析为符号。还有另外 2 个库项目正在构建良好。这个新的 lib 项目运行良好...

角度材质进度微调器和进度栏不显示

我正在开发 Angular 4。我做了一个新项目： ng 新的测试应用程序 然后我跑了： npm install --save @Angular/Material @Angular/cdk ng g c 首先 应用程序模块.ts 导入 { BrowserModule } fr...

角度垫错误不占用自己的空间

我有一个带有垫子错误的表格，我正在尝试消除这些错误。我知道我可以简单地分隔表单字段本身，但我一直在尝试向 mat-error 元素添加边距/填充/边框，并且......

Mat 日期范围日期选择器显示错误的值 - Angular

Mat 日期范围日期选择器显示错误的值 我需要起始值 2021-02-01T00:00:00.000Z

Angular DatePicker 拒绝以 DD/MM/YYYY 格式显示

我的应用程序设置 进口 { MAT_MOMENT_DATE_ADAPTER_OPTIONS， MAT_MOMENT_DATE_FORMATS， 时刻日期适配器 来自 '@angular/material-moment-adapter'； 从 '@

如何获取Angular Material按钮的大小？ （AM版本>7.2）

使用 Angular Material（版本 > 7.2.2）时：Angular Material 团队删除了（之前可用的）全局可访问的 CSS 自定义属性“--mdc-icon-button-state-layer-size”。

材质 CDK 将背景附加到已打开的覆盖层

是否可以将背景附加到打开的叠加层上？我正在寻找与 .detachBackdrop() 函数相反的东西。 在覆盖配置中，我想将 hasBackdrop 保留为负并稍后添加...

在可观察对象内创建的垫表内形成数组

我有一个父组件：父列表包含两个子组件（第一个子列表，第二个子列表） 在第二个子列表组件中：我有一个 mat 表，用于接收要显示的数据...

来自 2 个不同来源的 Rxjs

我有一个包含 3 个字段的表单，这些字段作为查询参数放入 API 调用中。当点击按钮时，表单就会被提交，API 就会被调用，数据就会被放入表格中。桌子是有角的

如何自定义Mat-Tab？

我正在尝试自定义非活动 mat-tabs 的颜色，但我找不到文档来找到要使用的确切规则。我尝试了其他答案，但它们已经过时，不适用于我的情况。 我发现了一个...

Angular Material 输入 - 在 Flexbox 中增长的文本区域

我想让文本区域根据可用空间灵活增长。 所以基本上如果我有 &... 我想让textarea根据可用空间灵活增长。 所以基本上如果我有 <form> <mat-form-field class="example-full-width area-1"> <mat-label>Leave a comment</mat-label> <textarea matInput placeholder="Ex. It makes me feel..."></textarea> </mat-form-field> <mat-form-field class="example-full-width area-2" > <mat-label>Leave a comment</mat-label> <textarea matInput placeholder="Ex. It makes me feel..."></textarea> </mat-form-field> </form> 我希望输入区域也会增长。我知道存在指令 cdkTextareaAutosize 但这会让 textarea 根据输入而增长。这是我不想拥有的。 我想让 textarea 延伸到整个 height 而不仅仅是一小部分。我想要某种动态方法 - 取决于我放置组件的位置。 堆栈闪电战 下面的 CSS 可能有效，我们只需调整，使其始终 100% 基于 Flexbox 样式和 height:100%，我们使用 display: flex 和 flex-grow: 1 使框适合可用空间： ::ng-deep { .full-textarea { display: flex; mat-form-field { display: flex; flex-grow: 1; .mat-mdc-form-field-flex, .mat-mdc-form-field-infix, textarea { height: 100% !important; } } } } html <form class="full-textarea"> <mat-form-field class="example-full-width area-1"> <mat-label>Leave a comment</mat-label> <textarea matInput placeholder="Ex. It makes me feel..."></textarea> </mat-form-field> <mat-form-field class="example-full-width area-2"> <mat-label>Leave a comment</mat-label> <textarea matInput placeholder="Ex. It makes me feel..."></textarea> </mat-form-field> </form> Stackblitz 演示

Angular Material 15.2.9 中 mat-datepicker-toggle 禁用图标颜色的问题

我目前正在使用 Angular Material 版本 15.2.9，遇到这样的问题：mat-datepicker-toggle 图标的禁用状态保持黑色，而启用状态正确地显示...

使用要表达的对象数组进行 Angular Post 调用不起作用，甚至无法相互交谈

我正在处理一个特定的 Post 调用，该调用传递一个数组，该数组不想与我创建的用于进行 MySQL 查询的 Express Node.js 服务器通信。这是开始整个事情的方法代码：...

如何在 @angular/material-experimental 中使用自定义调色板 - 预计 $config.color.primary 是有效的 M3 调色板

X [错误] 预期 $config.color.primary 是有效的 M3 调色板。 角17 我在任何地方都找不到 @angular/material-experimental 预期的有效 M3 调色板。 在 styles.scss 中尝试过这个： @使用&

如何将数据从父组件传递到角度材料表子组件？

我正在使用角度材料表进行排序https://stackblitz.com/run?file=src%2Fapp%2Ftable-sorting-example.ts 我计划将它用作可重用组件，以便在父组件上，我只是......

如何在 Angular v17 中全局设置 MAT_FORM_FIELD_DEFAULT_OPTIONS

这是配置垫表单字段的外观的方法。 @NgModule({ 提供者：[ {提供：MAT_FORM_FIELD_DEFAULT_OPTIONS，useValue：{外观：'大纲'}} ] }) 如何在 v17 中做同样的事情

Angular 表单验证：显示空密码和不匹配密码的错误

我想执行表单验证。如果该字段是“脏”的。 如果密码字段中没有任何内容，则应显示错误。 如果密码不匹配，也会出现错误

我想问一下，尽管 opt.checked 为 true，但这些多个复选框未与 [checked] 双向绑定绑定有什么问题

<div style="display: table-caption" [id]="question.key" *ngSwitchCase="'checkbox'"> <div *ngFor="let opt of question.options; let i = index" style="display: flex; flex-direction: column;"> <!-- <mat-checkbox [checked]="opt.checked">{{opt.value}}</mat-checkbox> --> <mat-checkbox [formControlName]="question.key" style="padding-bottom: 12px;" #checkBox [checked]="opt.checked" (change)="getCheckbox(checkBox)" [value]="opt.key" [name]="opt.key">{{opt.value}} </mat-checkbox> </div> </div> 我想问一下，尽管 opt.checked 是 true，但这些多个 checkboxex 没有与 [checked] 双向绑定绑定有什么问题。 我希望选中复选框，当我用 formControl 交换 ngFor 时它可以工作，但当我使用角度动态表单检查时我将无法验证 当您将 mat-checkbox 与 FormControl 一起使用时，您不应该使用选中（如果您使用模板驱动表单，则等于。您应该通过 formControl 管理值） 例如 subtasks: [ {name: 'Primary', completed: false}, {name: 'Accent', completed: false}, {name: 'Warn', completed: false}, ], form=new FormGroup({ Primary:new FormControl(false), Accent:new FormControl(false), Warn:new FormControl(false), }) 并使用： <ul [formGroup]="form"> @for (subtask of task.subtasks; track subtask) { <li> <mat-checkbox [formControlName]="subtask.name"> {{subtask.name}} </mat-checkbox> </li> } </ul> 另一种方法是使用检查的属性和事件更改的方式 <ul> @for (subtask of task.subtasks; track subtask) { <li> <mat-checkbox [checked]="form.get(subtask.name)?.value" (change)="form.get(subtask.name)?.setValue($event.checked)"> {{subtask.name}} </mat-checkbox> </li> } </ul> a stackblitz 就像 Angular 中使用反应形式的示例一样。看到 stackblitz 中有两个函数和一个变量 allComplete allComplete: boolean = false; someComplete(): boolean { return Object.keys(this.form.controls) .filter(key => this.form.get(key)?.value).length > 0 && !this.allComplete; } updateAllComplete() { this.allComplete = Object.keys(this.form.controls) .filter(key => !this.form.get(key)?.value).length==0 } //in setAll setAll(completed: boolean) { this.allComplete=completed //<--we add this line also this.subtasks.forEach(t => this.form.get(t.name)?.setValue(completed)); } 管理典型的“selectAll”

如何避免 Angular 材质中出现额外的 mat-form-field-underline

我遇到一个问题，为什么在使用组件时会出现额外的 mat-form-field-underline 。 我的页面使用此标记： 我遇到一个问题，为什么在使用组件时会出现额外的 mat-form-field-underline。 我的页面使用此标记： <mat-form-field class="col-md-6"> <app-mat-select-all [data]="tractList$" formControlName="tractList" fieldName="name" [multiselect]=true labelText="Tract List" idField="guid" > </app-mat-select-all> </mat-form-field> 我的自定义组件具有以下模板代码 <form novalidate [formGroup]="form"> <mat-form-field> <mat-label>{{labelText}}</mat-label> <mat-select #select [multiple]="multiselect" [formControl]="selectField" > <div class="select-all"> <mat-checkbox *ngIf="multiselect" [(ngModel)]="allSelected" [ngModelOptions]="{standalone: true}" [indeterminate]="isIndeterminate()" [checked]="isChecked()" (click)="$event.stopPropagation()" (change)="toggleAllSelection($event)">{{text}}</mat-checkbox> </div> <mat-option *ngFor="let item of data" [value]="item[idField]"> {{item[fieldName]}} </mat-option> </mat-select> </mat-form-field> </form> 在渲染的页面上看起来像这样 当我将以下行添加到我的父样式表中时，所有 mat-form-field-underlines 都消失了，这不是我想要的。如果我删除自定义组件中的 mat-form-field，我只会得到一行，但 mat-form-field-underline 的对齐方式与页面上的其他组件不对齐。所以我需要找到一种方法，只针对第二个下划线才能删除。 ::ng-deep .mat-form-field-underline { display: none; } 这是一个 stackblitz 示例，演示了第二下划线的问题 StackBlitz 示例 这是我检查时的代码，似乎由于某种原因在 mat-form-field 内有一个 mat-form-field。不知道为什么？ <mat-form-field _ngcontent-jtb-c709="" class="mat-form-field col-md-6 ng-tns-c393-17 mat-primary mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-hide-placeholder"><div class="mat-form-field-wrapper ng-tns-c393-17"><div class="mat-form-field-flex ng-tns-c393-17"><!--bindings={ "ng-reflect-ng-if": "false" }--><!--bindings={ "ng-reflect-ng-if": "0" }--><div class="mat-form-field-infix ng-tns-c393-17"><app-mat-select-all _ngcontent-jtb-c709="" formcontrolname="tractList" fieldname="name" labeltext="Tract List" idfield="guid" _nghost-jtb-c804="" ng-reflect-field-name="name" ng-reflect-label-text="Tract List" ng-reflect-id-field="guid" ng-reflect-name="tractList" ng-reflect-form-control-name="tractList" class="ng-tns-c393-17 ng-untouched ng-pristine ng-valid" ng-reflect-multiselect="true" ng-reflect-data="[object Object],[object Object"><form _ngcontent-jtb-c804="" novalidate="" ng-reflect-form="[object Object]" class="ng-untouched ng-pristine ng-valid"><mat-form-field _ngcontent-jtb-c804="" class="mat-form-field ng-tns-c393-18 mat-primary mat-form-field-type-mat-select mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-has-label mat-form-field-hide-placeholder ng-untouched ng-pristine ng-valid"><div class="mat-form-field-wrapper ng-tns-c393-18"><div class="mat-form-field-flex ng-tns-c393-18"><!--bindings={ "ng-reflect-ng-if": "false" }--><!--bindings={ "ng-reflect-ng-if": "0" }--><div class="mat-form-field-infix ng-tns-c393-18"><mat-select _ngcontent-jtb-c804="" role="combobox" aria-autocomplete="none" aria-haspopup="true" class="mat-select ng-tns-c500-19 ng-tns-c393-18 ng-star-inserted mat-select-empty mat-select-multiple ng-untouched ng-pristine ng-valid" ng-reflect-multiple="true" ng-reflect-form="[object Object]" aria-labelledby="mat-form-field-label-19 mat-select-value-15" id="mat-select-14" tabindex="0" aria-expanded="false" aria-required="false" aria-disabled="false" aria-invalid="false"><div cdk-overlay-origin="" class="mat-select-trigger ng-tns-c500-19"><div class="mat-select-value ng-tns-c500-19" ng-reflect-ng-switch="true" id="mat-select-value-15"><span class="mat-select-placeholder mat-select-min-line ng-tns-c500-19 ng-star-inserted"></span><!--bindings={ "ng-reflect-ng-switch-case": "true" }--><!--bindings={ "ng-reflect-ng-switch-case": "false" }--></div><div class="mat-select-arrow-wrapper ng-tns-c500-19"><div class="mat-select-arrow ng-tns-c500-19"></div></div></div><!--bindings={ "ng-reflect-offset-y": "0" }--></mat-select><span class="mat-form-field-label-wrapper ng-tns-c393-18"><label class="mat-form-field-label ng-tns-c393-18 mat-empty mat-form-field-empty ng-star-inserted" ng-reflect-disabled="true" id="mat-form-field-label-19" ng-reflect-ng-switch="true" for="mat-select-14" aria-owns="mat-select-14"><!--bindings={ "ng-reflect-ng-switch-case": "false" }--><mat-label _ngcontent-jtb-c804="" class="ng-tns-c393-18 ng-star-inserted">Tract List</mat-label><!--bindings={ "ng-reflect-ng-switch-case": "true" }--><!--bindings={ "ng-reflect-ng-if": "false" }--></label><!--bindings={ "ng-reflect-ng-if": "true" }--></span></div><!--bindings={ "ng-reflect-ng-if": "0" }--></div><div class="mat-form-field-underline ng-tns-c393-18 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c393-18"></span></div><!--bindings={ "ng-reflect-ng-if": "true" }--><div class="mat-form-field-subscript-wrapper ng-tns-c393-18" ng-reflect-ng-switch="hint"><!--bindings={ "ng-reflect-ng-switch-case": "error" }--><div class="mat-form-field-hint-wrapper ng-tns-c393-18 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><!--bindings={ "ng-reflect-ng-if": "" }--><div class="mat-form-field-hint-spacer ng-tns-c393-18"></div></div><!--bindings={ "ng-reflect-ng-switch-case": "hint" }--></div></div></mat-form-field></form></app-mat-select-all><span class="mat-form-field-label-wrapper ng-tns-c393-17"><!--bindings={ "ng-reflect-ng-if": "false" }--></span></div><!--bindings={ "ng-reflect-ng-if": "0" }--></div><div class="mat-form-field-underline ng-tns-c393-17 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c393-17"></span></div><!--bindings={ "ng-reflect-ng-if": "true" }--><div class="mat-form-field-subscript-wrapper ng-tns-c393-17" ng-reflect-ng-switch="hint"><!--bindings={ "ng-reflect-ng-switch-case": "error" }--><div class="mat-form-field-hint-wrapper ng-tns-c393-17 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><!--bindings={ "ng-reflect-ng-if": "" }--><div class="mat-form-field-hint-spacer ng-tns-c393-17"></div></div><!--bindings={ "ng-reflect-ng-switch-case": "hint" }--></div></div></mat-form-field> 当你这样做时： ::ng-deep .mat-form-field-underline { display: none; } 这适用于具有此类的所有材质组件。您应该做的是将自定义类添加到 HTML 内的组件，然后在 SCSS 文件中像这样引用它： <mat-form-field class="custom-class"> ... </mat-form-field> ::ng-deep .custom-class .mat-form-field-underline { display: none; } 现在，只有该组件会受到 ::ng-deep 覆盖的影响。 工作示例 在带有基于 MDC 的组件的 Angular-Material 15 及更高版本中，以下代码隐藏了 mat-select 的额外下划线，而不影响其他表单字段组件： mat-form-field:has(mat-select) div[matformfieldlineripple] { display: none; } 在这里，您将波纹 div 隐藏在 mat-form-fields 中，其中有 mat-select 。