Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
我正在使用 Angular Material 中的 cdk 上下文菜单，但在使用菜单本身的组件时，我无法使其正常工作。 @Input 绑定工作正常，但 @Output 永远不会发出......
Angular 16.2.12 ComponentPortal 不再扩展 Portal<any>
我正在尝试使用 cdkPortalOutlet 动态渲染组件，但 ComponentPortal 似乎不再扩展 Portal。 TS 私有注入器=注入（注入器）； 公共步骤门户...
我正在构建一个在 Angular 16 中使用 Angular Material 的应用程序。我有 ngrx 状态管理来收集一系列对象以供选择。我希望输入显示此
我在完成任务时遇到了很大的困难，这是我第一次使用 Angular。 我必须显示一个包含类别和嵌套子类别的下拉菜单。 它的 html 非常简单...
我正在尝试对垫表进行内联编辑。 我点击链接 https://stackblitz.com/edit/angular-custom-pagination-mat-table?file=src%2Fmain.ts 这里在第 1 页中我正在编辑第二个 ro...
Material 17 中的 SelectBox 看起来与 Material 14 中不同
我将 Angular v14 更新为 Angular v17.1.x。和材质到 v17.2.x 一切正常，但材质选择框有问题。 更新后的选择框如下所示： 但应该...
防止将滚动条添加到 Angular mat-drawer 组件中的 mat-drawer-inner-container
上下文： 我正在处理一个需要使用垫子抽屉的屏幕，垫子抽屉将显示自定义组件。但是，自定义组件嵌套在 div 内（使用 class="mat-...
我使用了 mat 对话框作为 ag 网格表单元格单击的确认对话框，早期的弹出窗口工作正常，但现在如果单击任何键（如 tab、shift、alt 或任何键）则无法工作...
我尝试过这个，但是 Angular 不知道“otp:”。在我添加它的定义之后，没有任何改变。 TS： 异步 otpRequest() { if ('OTPCredential' 在窗口中) { 常量
Mat Autocomplete 用作 formControl 时不设置输入值
我有一个实现 ControlValueAccessor 的自定义自动完成组件。从父组件中，我尝试使用 form.get('productName').setValue('Product 1'); 设置值。这设置了
带有材质 UI 的 Angular 独立组件的塞浦路斯组件测试给出了 BrowserAnimationsModule 导入错误
我在我的角度应用程序的延迟加载路线中使用独立组件。当我提供应用程序时，一切正常。主应用程序使用模块，但所有其他组件都是独立的......
如何使用表格内的垫选择将 Angular Material 表单字段居中？
如何消除这个底部缝隙？ 使用 Angular v15。 代码来自材料组件文档，没有修改。只是一个默认表格和默认大纲表单字段。 如何消除这个底部间隙？ 使用Angular v15。 代码来自材料组件文档，没有修改。只是一个默认表格和默认大纲表单字段。 <mat-form-field appearance="outline" > <mat-label>Favorite food</mat-label> <mat-select> @for (food of foods; track food) { <mat-option [value]="food.value">{{ food.viewValue }}</mat-option> } </mat-select> </mat-form-field> 我们可以使用下面的CSS和类来做到这一点！ 注意：此空间保留用于显示验证消息，例如this field is required，因此在进行更改之前请记住这一点！ .no-bottom-space .mat-mdc-form-field-subscript-wrapper { display: none !important; } 如果您希望它在组件内工作，请执行此操作 ::ng-deep .no-bottom-space .mat-mdc-form-field-subscript-wrapper { display: none !important; } 堆栈闪电战 html ... <ng-container matColumnDef="symbol"> <th mat-header-cell *matHeaderCellDef>Symbol</th> <td mat-cell *matCellDef="let element"> <mat-form-field appearance="outline" class="no-bottom-space"> <mat-label>Outline form field</mat-label> <input matInput placeholder="Placeholder" /> </mat-form-field> </td> </ng-container> ... 堆栈闪电战
如何降低包含垫选择的垫字段的高度？ 使用 Angular v15。 代码来自材料组件文档，没有修改。只是一个默认表格和默认大纲...
cdk-virtual-scroll-viewport 带搜索不显示值
这几天我一直在尝试修复一些 Angular 15 代码，但找不到解决方案。 我正在使用带有 ngx-mat-select-search 和虚拟滚动 cdk-virtual-scroll-viewport 的 mat-select（Legacy）。
我正在尝试将一个复杂的对象传递给我的指令（这是一个不同的formFontrol，所以我不能使用[formControl]，formControlName etx...） 我正在尝试将一个复杂的对象传递给我的指令（这是一个不同的 formFontrol，所以我不能使用 [formControl]、formControlName etx...） <input matInput appDateInputEvents [control]="fieldGroup.get('date')"> 这是我的指令 @Directive({ selector: '[appDateEventsInput]', standalone: true, }) export class DateInputEventsDirective { constructor() { } @Input() control!: AbstractControl; //MORE STUFF } 但是 Angular 没有将 [control] 视为已知属性 相反，如果我只使用不带方括号的控件，角度将其重新识别为属性，但就像 String 那么我应该做什么？ 您可以尝试将 getter 传递给您的指令，以确保模板正确解释您想要执行的操作。 在你的ts文件中 public get dateFormControl(): FormControl { return this.fieldGroup.get('date'); } 在模板中 <input matInput appDateInputEvents [control]="dateFormControl">
Angular Material：无法更改 mat-table 中列的宽度
我是一名 UI 开发新手，在 html 样式方面没有太多经验。有人可以告诉我如何使垫表中的列变小吗？我不明白为什么我不能完成这项工作。 哈...
此版本的 CLI 仅与 Angular 版本 ^17.0.0 兼容，但找到了 Angular 版本 11.0.9。出现错误
[package.json 文件 (https://i.stack.imgur.com/M5r3q.png) npm 错误！无法解决依赖关系： npm 错误！对等 zone.js@"~0.10.3" 来自 @angular/[email protected] npm 错误！节点模块/@角度/c...
材料指南规定： “对于任何 Angular Material 组件，您可以安全地为组件的宿主元素定义自定义 CSS，从而影响该组件的定位或布局......
在我的 Angular 项目中，我有以下代码（简化）： 在我的 Angular 项目中，我有这段代码（简化）： <mat-radio-group aria-labelledby="readingListGroupLabel" [(ngModel)]="selectedExportTo" name="exportTo"> <mat-radio-button aria-label='choose to export to reading list collection' *ngFor="let option of exportToOptions" [value]="option"> {{option}} </mat-radio-button> </mat-radio-group> 但由于某种原因，mat-radio-button“选择导出到阅读列表集合”的咏叹调标签被缩短为 30 个字符 - 在浏览器中我看到： ng-reflect-aria-label="Choose to export to reading li" 这是为什么？ 啊！这是一个奇怪的问题，但这是解决方法，我知道这不是最好的解决方案，但是是的，你可以解决这个问题 <mat-radio-group aria-labelledby="readingListGroupLabel" [(ngModel)]="selectedExportTo" name="exportTo"> <mat-radio-button *ngFor="let option of exportToOptions" [value]="option"> {{option}} </mat-radio-button> </mat-radio-group> fullLabel = 'choose to export to reading list collection' constructor(private renderer: Renderer2) @ViewChildren(MatRadioButton) radioButtons: QueryList<MatRadioButton> ngAfterViewInit(){ const radioButtonComponent = this.radioButton.first const radioButtonElement = radioButtonComponent._elementRef.nativeElement this.renderer.setAttribute(radioButtonElement, 'aria-label', this.fullLabel) } 堆栈闪电战