Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
错误 代码 我已经尝试了一切但未能解决 我使用相同的选择器但未解决 它应该显示标签、输入框和按钮。 我已经尝试了给出的解决方案但没有解决......
Angular Material 和 Jasmine：“没有 InjectionToken MdDialogData 的提供者！”
我有一个用于 Angular Material MdDialog 的组件： @成分（{ ... }) 导出类 MyComponent { 构造函数（@Inject（MAT_DIALOG_DATA）公共数据：任何，公共拨号...
我稍微更改了 Angular Material 文档扩展面板手风琴演示，以便将帐户圆圈图标移动到标题左侧，如下所示： 我稍微更改了 Angular Material 文档扩展面板手风琴演示，以便将帐户圆圈图标移动到标题左侧，如下所示： <mat-expansion-panel-header> <mat-icon>account_circle</mat-icon> <mat-panel-title> Personal data </mat-panel-title> </mat-expansion-panel-header> 但是它仍然出现在右侧。 我们如何将图标移动到标题左侧，同时将 CSS 保留在声明组件内？ 使用 order更改图标和标题的顺序。 mat-panel-title { order: 1; } mat-icon { order: 0; margin-right: 1rem; } 在 mat-panel-title 中添加图标 <mat-panel-title> <mat-icon>account_circle</mat-icon> Personal data </mat-panel-title> 这对我有用。 剩下的唯一问题是图标和文本之间的间距。添加<div> </div>解决了这个问题
Angular 17 | Angular Material 17.3.1：Angular Material 表单字段（焦点）和（模糊）事件的问题
我试图向我的 mat-form-field 输入字段添加（模糊）和（聚焦）效果，但它们似乎在我这边无法正常运行。 这是与我类似的代码示例： html文件 ...
Index.html 文件是： App.module 文件是： @NgModule({ 进口：[ 浏览器模块， 应用程序路由模块，
我是角度新手，所以请帮助我理解。我在我的页面上添加了一个来自角度材料的工具栏，它改变了我的页面的高度。正如您在屏幕截图中看到的，我的页面完全是...
如何在没有额外间距的情况下使用 Angular Material 图标？
我目前正在使用 Angular Material 图标，想知道是否有办法使用没有默认间距的图标。我注意到 Angular Material 的图标被一些
mat-form-field 必须包含 MatFormFieldControl 并且已导入
我收到错误 ERROR mat-form-field must contains a MatFormFieldControl 这意味着我需要在最近的父模块中导入 MatFormFieldModule。但我已经这么做了，所以我不明白...
我已将一个应用程序升级到 Angular 17（从 12）。但是，我收到许多与材质模块相关的运行时错误。我尝试了很多方法试图解决它，但无法弄清楚......
与材质选项卡一起使用时，浏览器调整大小会扭曲 ngx 数据表
我使用的是 ngx-datatable 19.0.0、Angular 版本 11.1.0 和 Material 版本 11.2.13。 当我直接在 ngx-datatable 中使用 props [columnMode]="'force'" 时，页面正确加载并且
我从后端获取一些数据并将其显示在我的用户界面中。问题是我希望能够修改每一行的输入字段和复选框，然后提交整个表单并处理信息...
我最近将一个应用程序从 v12 升级到 v17，现在我收到许多与材质模块相关的运行时错误，但没有解决它们。任何帮助深表感谢。 错误 NG8001：'...
我有一个场景，我想将一些按钮对齐在同一水平线上。我不明白为什么 mat-icon-button 没有与其他按钮相同的对齐方式。两者都有
我有一个组件 A，通常应该在没有关闭按钮的情况下显示。但是，当我在对话框中打开组件 A 时，我想添加一个关闭按钮来关闭对话框。 我怎样才能实现这个
修改 Angular 16 mat-form-field 样式
我希望更改 Angular Material 的 MatFormField 的默认样式。我想减少表单字段中输入字段的内部填充，并减少每个表单字段之间的间隙。 我是
Angular Materials：您可以禁用输入的自动完成建议吗？
我只是使用像这样的简单输入容器 姓名 我只是使用像这样的简单输入容器 <md-input-container class="md-block" flex-gt-sm > <label>Name</label> <input md-maxlength="30" name="name" ng-model="name" /> </md-input-container> 输入字段建议之前输入的值，这模糊了一些重要的界面元素，而且在我的情况下也确实没有必要。有什么办法可以禁用这些建议吗？ 将 autocomplete="off" 添加到输入元素，就像这样： <input md-maxlength="30" name="name" ng-model="name" autocomplete="off" /> 请参阅此供您参考。 对于没有 name 属性的输入，或将其值设置为自动填充功能常用的输入（名称、电子邮件、街道、国家/地区...），浏览器通常会忽略 autocomplete="off"。 就我而言，将输入设置为一个不寻常的名称就足够了。 <input type="text" name="someUnusualName" autocomplete="off"> 将 autocomplete="off" 添加到输入中，但对于现代浏览器，请使用 autocomplete="nope" 旧版浏览器 <input md-maxlength="30" name="name" ng-model="name" autocomplete="off" /> 现代浏览器 <input md-maxlength="30" name="name" ng-model="name" autocomplete="nope" /> 以防万一有人和我有同样的经历（因为当前的答案在我的 Chrome 上不起作用），我使用了如下所示的方法并且它有效： <input md-maxlength="30" name="name" ng-model="name" autocomplete="new-password" /> 新浏览器似乎会查看 id 字段或名称字段来确定您要通过自动填充查找的内容。当我想关闭自动填充功能时，我开始倒着拼写。 问题标签 - 自动填充弹出窗口 <input id='cp_state_i' required /> 修复 - 不自动填充弹出窗口 <input id='cp_etats_i' required /> 我的问题是我正在使用州的自动完成选项列表。弹出窗口是一个问题。这是我的修复，可能对你有帮助。 似乎在某些文本字段上起作用的另一件事是这个 <input autocomplete='new-password'/> 我删除 type='text 并且它会停止弹出内容。但无论出于何种原因，它并不能对所有事情都起作用，只是对某些事情起作用。 我不确定为什么浏览器不再支持 autocomplete='off' 。除了简单的登录表单之外，在处理 CRUD 和其他合理操作时，它会带来一些麻烦。 <input type="text" id="example" placeholder="" matInput [(ngModel)]="item.productDescription" [matAutocomplete]="product" [matAutocompleteDisabled]="condition"/> 只需在有效条件下使用 [matAutocompleteDisabled] 属性即可。 只需使用输入type="search"就可以了。在 Google Chrome 版本 92.0.4515.107（官方版本）（arm64）上测试 例如：<input type="search" name="namesearch" id="search-cust" placeholder="Shop Name" style="width:170px" /> 对于现代浏览器，以下内容应该有效： 对于现代浏览器和最新更新，您可以将这两个属性 autocomplete="false" 和 role="presentation" 添加到您的输入中。
我有一个像这样的父组件。 我有一个像这样的父组件。 <form [formGroup]="validateFormGroup"> <div> <mat-form-field> <input matInput placeholder="Name" maxlength="150" formControlName="name" required> </mat-form-field> </div> </form> <div class=""> <app-calendar-time-zones (getSelectedTimeZone)="setTimeZoneSelected($event)" ></app-calendar-time-zones> </div> 在 app-calendar-time-zones 组件中，这是我的 HTML 代码 <div class="calendar-container"> <mat-form-field> <mat-label>Select time zone</mat-label> <mat-select [(ngModel)]='selectedTimeZone.displayName' class='form-control' > <mat-option *ngFor="let timezone of filteredTimeZones | timezonesFilter : searchValue" [value]="timezone.id" (click)="timeZoneSelected(timezone)"> {{timezone.offset + ' ' + timezone.displayName}} </mat-option> </mat-select> </mat-form-field> </div> 在子组件 Ts 文件中，我正在设置这样的值，但其垫选择元素未设置为所选值。 this.selectedTimeZone = this.filteredTimeZones[0]; // selectedTimeZone i am getting here is this == {id: "Africa/Abidjan", displayName: "Greenwich Mean Time", useDaylightTime: false, rawOffset: 0, offset: ""} 显示以下空下拉列表。但是，如果我单击下拉图标，我就可以看到所有选项。 and in the browser if i inspect mat-select element. ngModel value is setting . 要自动选择，通过 ngModel 传递的值必须与选项的 value 匹配。 所以，我猜 selectedTimeZone.displayName 与绑定到您的选项的任何 timezone.id 都不匹配。 这对我有用 <mat-form-field> <mat-label for="">Doctor Name</mat-label> <mat-select [(ngModel)]="patientInfo.doctorName"> <mat-option value="" selected></mat-option> @for (doctor of doctorsList(); track doctor) { <mat-option [value]="doctor.name">{{ doctor.name }}</mat-option> } </mat-select> </mat-form-field>
Mat Accordion multi=false 有 2 个面板 A 和 B。当 B 中发生 keyup.ENTER 事件时如何使 A 打开？
这应该很简单，但我相信由于面板 B 包含 ACE 编辑器控件而变得复杂。 我正在 Ace 编辑器控件以及 ...
将 Angular Material 的芯片组件集成到我的表单中时出错
我想将芯片组件包含在我的表单组件中。 为此，我使用 Angular Material 的芯片。 https://material.angular.io/components/chips/examples#chips-form-control 出现错误：...
我收到类似错误 错误 NG8002：无法绑定到“svgIcon”，因为它不是“mat-icon”的已知属性。 我的开发机器上没有这个。我尝试通过运行“...