Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
带有图标和文本的 Angular Material 按钮呈现错误的方式
我有这个非常简单的角度材质按钮： 测试 展开更多 但文字和图标呈现相反的效果...
如何在 Angular 中向 index.html 添加内部脚本文件？
如何在index.html中插入自定义js文件？总是出现404错误 https://i.sstatic.net/e6EWe.png 但如果添加 custom.js 效果很好 https://i.sstatic.net/QWsPv.png 我无法使用 node_modules 因为...
abcmodule.forroot(apikey) 在导入之前如何解析apikey？我正在 app.module 的 app_initializer 中解析配置。 ts
`导出函数 getApiKey(config: WebConfigService): Promise { 返回新的 Promise((解决, 拒绝) => { config.getConfigLoaded().subscribe(key => { 如果（键）{ ...
带有粘性标题的角度材质表，使用overflow-x时出现问题
我有下表 ... 我有下表 <div class="table-container" #scrollable> <table mat-table [dataSource]="dataSource" cdkScrollable> <!-- Definir columnas --> <ng-container *ngFor="let column of displayedColumns"> <ng-container [matColumnDef]="column"> <th mat-header-cell *matHeaderCellDef>{{ column }}</th> <td mat-cell *matCellDef="let element">{{ element[column] }}</td> </ng-container> </ng-container> <!-- Filas de datos --> <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> </div> CSS .table-container { width: 100%; /* overflow-x: auto; */ } .fixed-header { position: sticky; top: 0; background-color: white; z-index: 1; } 注意 .table-container 中如何注释 CSS 溢出。到目前为止，桌子上的粘性标题就可以工作了。 ..除非您取消注释表容器内的“overflow-x”片段。 .table-container { width: 100%; overflow-x: auto; } .fixed-header { position: sticky; top: 0; background-color: white; z-index: 1; } 我有一个类似的场景，必须在表格容器内添加水平滚动（仅适用于较小的屏幕），但是通过这样做，在进行垂直滚动时，表格的粘性标题不会保持在表格顶部。有什么办法可以达到这个目的吗？ 请参阅此 stackblitz 以查看完整示例。 已经尝试过 chatGPT 来寻找解决方案，但这很令人困惑，哈哈 当 overflow 元素的父元素上有 sticky 属性时，粘性功能将不起作用，您需要将 overflow-x: auto 添加到 body 中 body { font-family: Roboto, Arial, sans-serif; margin: 0; overflow-x: auto; width: 100vw; } CSS： .table-container { overflow-x: auto; display: unset; } .fixed-header { position: sticky; top: 0; background-color: white; /* Ajusta el color de fondo según tu diseño */ z-index: 1; } Stackblitz 演示
CSS Bug：Mat-Table 中的列是粘性的，但当我滚动时，不显示右边框
当我向右滚动时，我的右边框变成白色并且有间隙。我已经尝试了一切，但找不到错误。你能帮我吗？
找不到 Angular Material 核心主题 Angular 18
我是 Angular 18 的新手，我正在尝试使用 Angular 材料进行简单的应用程序开发。 当我添加主题为天蓝色的 @angular/material 时，我面临以下挑战......
如何将 NgModule 导入独立的 Angular17 项目
我无法将 NgModule 导入到我的独立项目中 我尝试导入 NgModule ，但出现错误，无法直接导入 NgModule 或指令或管道。我想要我的角度应用程序的代码...
如何将base64格式转换为角度中的word文档预览[关闭]
在 Angular 中我们有图书馆吗？ 我正在寻找一些例子，但没有找到。 我找到了一个库 ngx-doc-viewer 它有一个 url，但我有 base64，我需要将其转换为 word
如何在 Angular 中单击按钮时动态地将 FormControl 添加到 FormArray？
如何在formarray中动态添加formcontrol(选项)？我想动态地将问题添加到表单数组中。单击按钮后，它应该更新显示。我用的是角度7。 组件...
ngx-easy-table 中的第一列标题宽度问题导致未对齐
我在 Angular 应用程序中使用 ngx-easy-table，但遇到一个问题，即第一个列标题的宽度过大，导致表列与行值错位。问题
我升级到 Angular 18（并将主题样式调整为 Material 3 SCSS API），但我不知道如何使用新 API 定义排版比例级别（字体大小）。以前都是这样做的...
Angular Material 3“无法解析未定义的指定颜色。请验证它是十六进制颜色”
我刚刚将 Angular 项目升级到今天的最新版本（版本 18.0.0），包括使用材料 3 设计的材料库。从这里的文档中，我正在尝试生成一个自定义...
当我尝试使用 nxgenerate @angular/material:m3-theme 在 @angular/material@18 中生成自定义主题时，它会问我这个问题 √ 您想在主题中使用系统级变量吗？西...
Angular Material 18：“调色板中不存在色调“500””
我将我的项目上传到 Angular 18（也是 Material v.18），我的调色板主题的样式已更改，我无法部署我的项目。 @use 'SASS：地图'； @use '@angular/material' 作为垫子； $md-prima...
当 [matTooltip] 用于除 <button> 之外的任何内容时，Aria-scribedby 不起作用？
当在按钮上使用 [matTooltip] 时，matTooltip 将按预期工作：屏幕阅读器在读取按钮文本后读取工具提示文本。 然而，当在 工具上使用时...
Angular Material 3 主题不包括所有样式，如立面或颜色
截至今天，我一直在使用最新 Angular 18.0.0 版本中的新 Angular Material 3 设计风格。已尝试遵循此处的文档。以下是我到目前为止所做的事情。 ...
在我的应用程序中，我使用我的自定义日期时间选择器（它由文本输入和材料日期选择器组成）- 代码如下所示： 在我的应用程序中，我使用我的自定义日期时间选择器（它由文本输入和材料日期选择器组成）- 代码如下所示： <div fxLayoutAlign="center center" fxLayoutGap="10px" [formGroup]="form"> <mat-form-field appearance="outline" class="no-padding no-underline" [class.mat-form-field-invalid]="control?.invalid&&!control.hasError('badTime')" [class.ng-invalid]="control?.invalid&&!control.hasError('badTime')"> <mat-label>{{label}}</mat-label> <input matInput [matDatepicker]="picker" [max]="max" [min]="min" (dateChange)="changeDate($event)" readonly formControlName="date" (focus)="picker.open()" [errorStateMatcher]="matcher"> <mat-datepicker #picker></mat-datepicker> </mat-form-field> <app-timepicker [test]="control" [showSeconds]="showSec" formControlName="time" [label]="label" (timeChanged)="changeTime($event)" (overMidnight)="onOverMidnight($event)"></app-timepicker> </div> 此表单控件向外部返回单个值，我最近升级到了 Angular Material 17，并且我在将无效状态从父表单传播到此表单控件时遇到问题。在以前的版本中，我能够至少将无效状态传播为类“mat-form-field-invalid”，我将其与 ngClass 一起使用，并根据传递给组件的 ngControl 进行切换。这不再起作用了。任何想法如何将无效状态从父级传递到自定义表单控件，这将起作用，也许以更优雅的方式？ 我尝试了错误状态匹配器，但问题是，无效状态位于父表单上，所以我无法访问它。这是组件的代码： mport { DatePipe } from '@angular/common'; import { Component, EventEmitter, Input, OnInit, Output, forwardRef } from '@angular/core'; import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NgControl, NG_VALUE_ACCESSOR, FormControl, FormGroupDirective, NgForm } from '@angular/forms'; import { ErrorStateMatcher } from '@angular/material/core'; @Component({ selector: 'app-datetimepicker', templateUrl: './datetimepicker.component.html', styleUrls: ['./datetimepicker.component.scss'], providers: [ ] }) export class DatetimepickerComponent implements ControlValueAccessor{ matcher = new MyErrorStateMatcher(); value:Date=null; form:UntypedFormGroup=null; onChange = (value) => {}; onTouched = () => {}; touched = false; disabled = false; init=false; _disableTime=false; _disableDate=false; @Input('disableDate') set disableDate(value:boolean){ this._disableDate=value; if(value){ this.form.get("date").disable(); } else{ this.form.get("date").enable(); } }; @Input('disableTime') set disableTime(value:boolean){ this._disableDate=value; if(value){ this.form.get("time").disable(); } else{ this.form.get("time").enable(); } }; @Input() label:string; @Input() max:Date; @Input() min:Date; @Input() showSec:boolean=false; @Output() dateChanged:EventEmitter<Date>=new EventEmitter(); constructor(private fb:UntypedFormBuilder, private datePipe:DatePipe, public control:NgControl) { if (this.control != null) { this.control.valueAccessor = this; } this.form=this.fb.group({ date:[{value:null}], time:[null] }); console.log(this.control); } get errorState(): boolean { console.log("check"); return this.control.invalid; } writeValue(value: Date): void { if(value!=null){ this.value=value; this.form.setValue({ date:value, time:this.datePipe.transform(value,this.showSec?"HH:mm:ss":"HH:mm") },{emitEvent:false}) } } registerOnChange(onChange: any) { this.onChange=onChange; } registerOnTouched(onTouched: any) { this.onTouched = onTouched; } markAsTouched() { if (!this.touched) { this.onTouched(); this.touched = true; } } setDisabledState(disabled: boolean) { this.disabled = disabled; } changeDate(event){ const newDate=new Date(this.value.getTime()); newDate.setDate(event.value.getDate()); newDate.setMonth(event.value.getMonth()); this.value=newDate; this.onChange(this.value); console.log("datechanged"); this.dateChanged.emit(this.value); this.markAsTouched(); } changeTime(event){ const [hours,minutes,secs]=event.split(":"); console.log(event.split(":")); const newDate=new Date(this.value.getTime()); if(this.showSec){ newDate.setHours(hours,minutes,secs); } else{ newDate.setHours(hours,minutes); } this.value=newDate; this.onChange(this.value); this.markAsTouched(); } onOverMidnight(dateChange:number){ const newDate=new Date(this.value.getTime()); if(newDate<=this.max && newDate>=this.min){ newDate.setDate(newDate.getDate()+dateChange); this.value=newDate; this.onChange(this.value); this.form.patchValue({date:this.value}); } } } export class MyErrorStateMatcher implements ErrorStateMatcher { isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { console.log(control); console.log(form); return true; } } 为了确保父表单的无效状态正确传播到 Angular Material 17 中的自定义表单控件，您需要更有效地集成 ErrorStateMatcher。 :)
为什么我的自定义日期格式在 Angular Material Datepicker 中不起作用以及如何修复它？
为了更改材质日期选择器中的日期格式，我添加了以下配置： 导出常量 MY_DATE_FORMATS = { 解析：{ 日期输入：'DD/MM/YYYY', }, 展示： { 日期输入：...
我在 Angular 我的 Node 版本 v20.13.1 和 Angular 版本 v18.0.1 中创建了一个新项目。我从 CodedThemes 下载了一个免费模板，并将所有模板文件添加到我的项目中，然后...