Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
如何将我的 Angular Material 字段设置为只读？我查看了他们的 props 文档，没有看到任何与只读字段相关的内容。 我添加了“readonly：true”作为道具......
我在 https://stackblitz.com/edit/etnmae-xjweyt 有一个应用程序，似乎无法编译它，更不用说为导航栏分配中性颜色了。 我可以将其从浅色模式更改为深色模式，但想要一些......
在 Angular 中使用 @if() {} 进行内容投影时发出警告 - ngtsc(-998011)
<mat-form-field> <input matInput type="text" id="confirmationKey" placeholder="code de confirmation" formControlName="confirmationKey" > <mat-hint>Saisissez la clé de confirmation reçue par e-mail.</mat-hint> @if(formErrorHandler.getErrorMsg(confirmationKeyControl?.errors); as errorMsg ){ **<mat-error>{{errorMsg}}</mat-error>** } </mat-form-field> 警告信息： Node 匹配“MatFormField”组件的“mat-error, [matError]”插槽，但不会被投影到特定插槽中，因为周围的 @if 在其根处有多个节点。要将节点投影到右侧插槽中，您可以： 将 @if 块的内容包装在与“mat-error, [matError]”选择器匹配的内容中。 将 @if 块的内容拆分为多个 @if 块，使得每个块的根仅具有一个可投影节点。 删除 @if 块中的所有内容，除了正在投影的节点。 可以使用 extendedDiagnostics.checks.controlFlowPreventingContentProjection = "suppress" compiler option.ngtsc(-998011) 禁用此检查 我尝试过的步骤： 我将 @if 块的内容包装在 an 中以匹配 mat-error 槽，但警告仍然存在。 我将逻辑分成单独的 @if 块，确保每个块只有一个可投影节点，但我仍然看到警告。 我不想禁用extendedDiagnostics.checks.controlFlowPreventingContentProjection =“抑制”。 在使用内容投影处理 @if 时我缺少什么？我如何正确构建它以消除警告？ **你在开始和结束时都会弄乱角度编译器。也可能是一个错误，您可以通过在 Angular github 上创建问题来验证。 之前： @if(errorMessage(); as errorMsg ){ **<mat-error>{{errorMsg}}</mat-error>** } 之后： @if(errorMessage(); as errorMsg ){ <mat-error>{{errorMsg}}</mat-error> } Stackblitz 演示
使用 date-fns 和 Angular Material 日期选择器配置区域设置时，日期会消失
我正在尝试在我的 Anuglar 18 应用程序中使用 Angular Material 日期选择器配置 date-fns。但是，当我尝试配置区域设置时，日期选择器中的所有日期都不会出现。如果我记得...
Angular Material DatePicker 自动完成
尝试实现一个搜索栏，您可以在其中按项目名称或日期进行搜索。只是想知道是否有办法禁用日期选择器自动完成？ 问题是： - 如果我搜索...
我找不到更改材质组件的 Azure 和 Blue 主题所提供的颜色的方法。 特别是对于 mat-form-field (matInput)。 超文本标记语言 我找不到更改材质组件的 Azure 和 Blue 主题给出的颜色的方法。 特别是对于 mat-form-field (matInput)。 HTML <mat-form-field appearance="fill"> <mat-label>{{ "pression_amont_minimum" | translate }} (P1)</mat-label> <input matInput type="number" formControlName="PressAmMin" /> </mat-form-field> 尝试通过在 style.css 和 component.css 中引用它来更改组件的样式： mat-form-field{ background-color : white; } 什么都没发生 input{ background-color : white; } 一部分变成了白色 渲染 mat-label{ background-color : white; } ::ng-deep 对我没用 我发现改变的值 .mdc-text-field--filled:not(.mdc-text-field--disabled) { background-color: var(--mdc-filled-text-field-container-color, var(--mat-app-surface-variant)); 可以改变它的颜色，但没有找到方法来到达CSS的这一部分或覆盖它。 不建议针对 Angular Material 组件的内部元素，因为它们随时可能发生变化。但是，您可以为其 CSS 变量提供新值： mat-form-field { --mdc-filled-text-field-container-color: white; } 更新到 v19（当前处于 RC 版本）后，如果您使用 SCSS，则可以使用 overrides mixin 代替： @use '@angular/material' as mat; mat-form-field { @include mat.form-field-overrides(( filled-container-color: white, )); }
打开 Angular Material 对话框会使父显示淡出？
我正在我的项目中实现 Angular Material Dialog。 它正在工作，但是，当我打开对话框时，我的另一个屏幕（调用对话框的父组件）在后台消失。看到我...
Angular (18) Material Tooltip - 如何添加/自定义边框？
截至此问题发布，我正在使用最新版本的 Angular 和 Material。 我设法更改工具提示的背景和文本颜色，覆盖这些变量： --mdc-普通-
我想为 Angular 组件创建自定义生命周期挂钩。 两个例子是我想添加基于浏览器的模糊/焦点以及浏览器上的可见性变化的钩子。 我更愿意...
我喜欢在 MatDialog 中实现 DragAndDrop。 对于旧版本的 Angular，例如 Angular 7，有一个解决方案，但对于 Angular 17 为例，该解决方案的工作原理不同。 对于角度...
在单个网络应用程序中拥有多个主题的最佳实践是什么？覆盖或第二主题
我有一个为我创建的应用程序 https://stackblitz.com/edit/angular-gjkbqm-schlk9?file=index.html 这个应用程序展示了如何正确使用主题，这里给出了解释 我如何使用...
我正在开发一个角度应用程序，想更改垫平按钮的边框半径。我可以使用 css 更改按钮的背景颜色，但不能更改边框半径。我的代码 ...
我刚刚开始使用 Angular 3 并解决了错误。 但是，我在尝试让不同的字体和版式正常工作时遇到问题 我刚刚开始使用 Angular 3，并解决了错误。 但是，我在尝试让不同的字体和版式正常工作时遇到问题 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>StateLineRodz</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body class="mat-typography mat-app-background"> <app-component-test></app-component-test> <app-root></app-root> </body> </html> 我的风格.scss @use '@angular/material' as mat; $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$blue-palette, tertiary: mat.$magenta-palette, ), ) ); html,body { font-family: Roboto, 'Helvetica Neue', sans-serif; margin: 0; padding: 30px; height: 100%; @include mat.all-component-themes($theme); } :host { display: flex; flex-direction: column; align-items: flex-start; } 角度.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "stateLineRodz": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/state-line-rodz", "index": "src/index.html", "browser": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ "src/styles.scss", "src/m3-theme.scss" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" }, { "type": "anyComponentStyle", "maximumWarning": "2kB", "maximumError": "4kB" } ], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "stateLineRodz:build:production" }, "development": { "buildTarget": "stateLineRodz:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n" }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "polyfills": [ "zone.js", "zone.js/testing" ], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ "src/styles.scss", "src/m3-theme.scss" ], "scripts": [] } } } } }, "cli": { "analytics": false } } 当我加载页面时，我总是得到相同的字体 我尝试使用不存在的字体加载页面，但没有成功，只需编译并说“确定” 我没有更多线索来猜测这个东西。 首先确保将 font 添加到 index.html。 ... <!-- custom font --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:[email protected]&family=Open+Sans:wght@300&display=swap" rel="stylesheet" /> </head> 在此之后，在styles.scss中，您必须首先定义typography-object。有效值为。 _config-validation.scsss $allowed: ( brand-family, plain-family, bold-weight, medium-weight, regular-weight, use-system-variables, system-variables-prefix ); 因此在顶部定义相同的属性名称$typography-config。 $typography-config: ( // <- notice! plain-family: 'Edu AU VIC WA NT Pre', // <- notice! brand-family: 'Edu AU VIC WA NT Pre', // <- notice! ); // <- notice! 然后将此定义映射到 define-theme、typography 属性，如下所示。 $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$azure-palette, tertiary: mat.$blue-palette, ), typography: $typography-config, // <- notice! ) ); 即使在这些更改之后，您也不会看到正在应用的类型，我们必须调用方法 mat.typography-hierarchy 将版式应用到组件。 @include mat.core(); @include mat.color-variants-backwards-compatibility($theme); @include mat.typography-hierarchy($theme); // <- notice! 完整代码： @use '@angular/material' as mat; $typography-config: ( // <- notice! plain-family: 'Edu AU VIC WA NT Pre', // <- notice! brand-family: 'Edu AU VIC WA NT Pre', // <- notice! ); // <- notice! $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$azure-palette, tertiary: mat.$blue-palette, ), typography: $typography-config, // <- notice! ) ); body { font-family: Roboto, 'Helvetica Neue', sans-serif; margin: 0; padding: 30px; height: 100%; @include mat.all-component-themes($theme); } html { height: 100%; } @include mat.core(); @include mat.color-variants-backwards-compatibility($theme); @include mat.typography-hierarchy($theme); // <- notice! Stackblitz 演示
如何在 Angular 18 和 Material 3 中使用 Roboto 以外的字体
我刚刚开始使用 Angular 3 并解决了错误。 但是，我在尝试让不同的字体和版式正常工作时遇到问题 我刚刚开始使用 Angular 3，并解决了错误。 但是，我在尝试让不同的字体和版式正常工作时遇到问题 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>StateLineRodz</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body class="mat-typography mat-app-background"> <app-component-test></app-component-test> <app-root></app-root> </body> </html> 我的风格.scss @use '@angular/material' as mat; $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$blue-palette, tertiary: mat.$magenta-palette, ), ) ); html,body { font-family: Roboto, 'Helvetica Neue', sans-serif; margin: 0; padding: 30px; height: 100%; @include mat.all-component-themes($theme); } :host { display: flex; flex-direction: column; align-items: flex-start; } 角度.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "stateLineRodz": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/state-line-rodz", "index": "src/index.html", "browser": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ "src/styles.scss", "src/m3-theme.scss" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" }, { "type": "anyComponentStyle", "maximumWarning": "2kB", "maximumError": "4kB" } ], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "stateLineRodz:build:production" }, "development": { "buildTarget": "stateLineRodz:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n" }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "polyfills": [ "zone.js", "zone.js/testing" ], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": [ "src/styles.scss", "src/m3-theme.scss" ], "scripts": [] } } } } }, "cli": { "analytics": false } } 当我加载页面时，我总是得到相同的字体 我尝试使用不存在的字体加载页面，但没有成功，只需编译并说“确定” 我没有更多线索来猜测这个东西。 首先确保将 font 添加到 index.html。 ... <!-- custom font --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:[email protected]&family=Open+Sans:wght@300&display=swap" rel="stylesheet" /> </head> 在此之后，在styles.scss中，您必须首先定义typography-object。有效值为。 _config-validation.scsss $allowed: ( brand-family, plain-family, bold-weight, medium-weight, regular-weight, use-system-variables, system-variables-prefix ); 然后将此定义映射到 define-theme、typography 属性，如下所示。 $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$azure-palette, tertiary: mat.$blue-palette, ), typography: $typography-config, // <- notice! ) ); 即使在这些更改之后，您也不会看到正在应用的类型，我们必须调用方法 mat.typography-hierarchy 将版式应用到组件。 @include mat.core(); @include mat.color-variants-backwards-compatibility($theme); @include mat.typography-hierarchy($theme); // <- notice! 完整代码： @use '@angular/material' as mat; $typography-config: ( // <- notice! plain-family: 'Edu AU VIC WA NT Pre', // <- notice! brand-family: 'Edu AU VIC WA NT Pre', // <- notice! ); // <- notice! $theme: mat.define-theme( ( color: ( theme-type: light, primary: mat.$azure-palette, tertiary: mat.$blue-palette, ), typography: $typography-config, // <- notice! ) ); body { font-family: Roboto, 'Helvetica Neue', sans-serif; margin: 0; padding: 30px; height: 100%; @include mat.all-component-themes($theme); } html { height: 100%; } @include mat.core(); @include mat.color-variants-backwards-compatibility($theme); @include mat.typography-hierarchy($theme); // <- notice! Stackblitz 演示
我是 Angular 新手，想要动态更改 Angular 材质主题，我知道如何制作不同的主题，即通过制作 scss 文件，定义 3 种颜色，包括 mat 属性和功能...
Angular Material 表不显示数据，给出 _columnCssClassName is not iterable 错误
我有一个 Angular Material 应用程序，我试图向所有客户展示从 API 调用中获得的信息...我的应用程序已编译，但在浏览器控制台中我不断收到此错误： 错误错误：Un...
角度材质表 - 排序箭头在 mat-sort-header 中无法正确显示
我正在开发一个 Angular 项目，在该项目中我使用 Angular Material 的 mat-table 并启用了排序。排序功能有效，但列标题中的箭头未正确显示
下面的代码可以拖放表格行，并通过拖放对表格行重新排序。 但是，我想在 item.disable 为 true 时禁用拖放某些行，但不确定如何执行此操作。哈...
我目前正在尝试弄清楚如何正确使用 Angular Materials 中的分页器和表格。我可以显示数据，但我花了几个小时试图弄清楚如何让分页器......
我正在尝试以 formArray 作为输入数据源对角度材料表实现排序/过滤。 StackBlits 代码链接 数据源 = new MatTableDataSource([]); 我正在尝试以 formArray 作为输入数据源对角度材料表实现排序/过滤。 StackBlits 代码链接 dataSource = new MatTableDataSource([]); <table mat-table [dataSource]="formdataarray.controls" multiTemplateDataRows class="mat elevation-z8" matSort > <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay" > <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column}}</th> <td mat-cell *matCellDef="let element"> {{ element.value[column] }} </td> </ng-container> 但是排序/过滤不起作用 您有两个选择： 使用普通数组formdataarray.controls作为dataSource并实现所有数据源方法，如过滤器，按您自己的排序。或者编写自定义 CDK DataSource 实现。另请参阅https://blog.angular-university.io/angular-material-data-table/ 使用MatTableDataSource并调整过滤和排序逻辑以支持AbstractControl对象。 html <table mat-table [dataSource]="dataSource" ts ngOnInit() { // fill FormArray ... this.dataSource.data = this.formdataarray.controls; this.dataSource.sortingDataAccessor = (data: AbstractControl, sortHeaderId: string) => { const value: any = data.value[sortHeaderId]; return typeof value === 'string' ? value.toLowerCase() : value; }; const filterPredicate = this.dataSource.filterPredicate; this.dataSource.filterPredicate = (data: AbstractControl, filter) => { return filterPredicate.call(this.dataSource, data.value, filter); } } 叉式Stackblitz 此外，如果您想向 FormArray 添加新项目，您也应该更新 this.dataSource.data。另请参阅 使用 FormArray 的 Angular Material 可编辑表 您还需要添加事件(matSortChange)=sortTable($event) 前往table标签 并在组件内添加sortTable逻辑 需要 ngAfterViewInit 才能工作 import { MatTableDataSource } from '@angular/material/table'; import { MatSort } from '@angular/material/sort'; ... @ViewChild(MatSort, {static: false}) sort: MatSort ... ngOnInit() { this.getYourData$.subscribe(d => this.data = new MatTableDataSource(d)); } ngAfterViewInit(): void { this.data.sortingDataAccessor = (data: AbstractControl, sortHeaderId: string) => { const value: any = data.value[sortHeaderId]; return typeof value === 'string' ? value.toLowerCase() : value; }; this.data.sort = this.sort; // where this.sort defined above. this.data.filterPredicate = (data: AbstractControl, filter) => { // return true or false on data. } } ... html <table matSort ... 为了寻找这个问题的答案，我也经历了一段漫长的旅程。就我而言，还涉及过滤和分页。我在这篇文章here中总结了我的经验。