angular-material 相关问题

在 mat-expansion-panel-header 上设置 ::before 元素的样式？

在此演示中，我尝试对 mat-expansion-panel-header 的 ::before 伪元素进行样式设置，如下所示（样式规则添加到 styles.scss）： 垫扩展面板标题 { 位置：相对； } mat-exp...

更改垫复选框中的“勾号”标记颜色

我想更改垫复选框内的刻度线颜色。我自定义了垫子复选框并将背景颜色设置为白色。但刻度线颜色不清晰可见。有什么办法

展开时如何将 mat-expansion-header 放在 mat-expansion-content 的底部

展开时是否可以将 mat-expansion-header 放在 mat-expansion-content 的底部？ 我的标题中只有一个箭头，所以我希望面板底部有一个箭头...

如何阻止浮动标签浮动？

我需要这个标签停止浮动。我需要它保持静止。 输入来自 Angular Material。 https://material.angular.io/components/form-field/examples 在此输入图像描述 代码是...

选择后更改垫选择的颜色

我想在 select 后设置与 mat-select focus 相同的颜色。我该怎么做？ 我在文档中找不到任何与此相关的内容。 选择一个

本地更改检测的 Andular 材料日期选择器问题

我遇到一个问题，我们需要对组件进行本地更改检测，否则其他方面会非常慢。 但这会干扰垫日期选择器覆盖。 当我们想要四处走动时

每行垫表的上下文菜单，带有多个子菜单。如何添加带有多个子菜单的自定义菜单？

我需要每行垫表有一个上下文菜单，其中包含多个子菜单。如何添加具有多个子菜单的自定义菜单？我需要使用 Angular 11 和 Angular Material 11。 你能帮我解决这个代码吗？...

项目构建后未定义角度材质小吃栏

我对有角度的材料小吃栏有疑问。它可以在本地主机上运行，但是在构建过程之后我收到错误： 无法读取未定义的属性（读取“openSnackBar”） 我称之为公共服务

使用 Jasmin 和 Karma 进行角度信号测试

我正在尝试根据 getScrollTop() 上的间谍操作来测试“showToolbar”的值是 true 还是 false。 我的代码： @成分（{ 选择器：'应用程序标题'， 独立：真实， 进口：...

角度材质 mat-align-tabs 属性未正确对齐

正如角度材料选项卡文档中提到的，我的项目中有这个标记： 内容1...

角度桌垫排序箭头在首次加载时不显示

为什么当我在 ngOnit 中分配或放置 sortParams 和 sortDirs 时，排序箭头显示并工作，但当我将其放置或分配在 getUserData() 内时它不起作用？它是因为 o...

Angular 7 - 根据条件更改 Mat-select-value 的颜色

我有一个垫选择，我想根据条件更改所选值的颜色。基本上是为了向用户表明已进行更改。我知道我可以访问 mat-select-value...

如何有条件地阻止用户导航到 mat-tab-group 中的其他选项卡

我有一个使用角度材料选项卡组的角度组件。 我有一个使用角度材料选项卡组的角度组件。 <mat-tab-group> <mat-tab label="First"> <app-comp1></app-comp1> </mat-tab> <mat-tab label="Second"> <app-comp2></app-comp2> </mat-tab> <mat-tab label="Third"> <app-comp3></app-comp3> </mat-tab> </mat-tab-group> 在某个选项卡中，用户可以进行一些更改并保存。如果用户进行了一些更改并尝试导航到另一个选项卡而不保存，我想要求用户在导航到另一个选项卡之前确认放弃更改。 有什么办法可以做到这一点吗？ 如果今天没有解决方案，那么我可以为您提供一些基于猴子补丁的技巧： 模板.html <mat-tab-group #tabs> ... </mat-tab-group> 组件.ts import { MatTabGroup, MatTabHeader, MatTab } from '@angular/material'; ... @Component({...}) export class AppComponent implement OnInit { @ViewChild('tabs') tabs: MatTabGroup; ngOnInit() { this.tabs._handleClick = this.interceptTabChange.bind(this); } interceptTabChange(tab: MatTab, tabHeader: MatTabHeader, idx: number) { const result = confirm(`Do you really want to leave the tab ${idx}?`); return result && MatTabGroup.prototype._handleClick.apply(this.tabs, arguments); } } NG 运行示例 接受的答案在最新的 vue 版本中已不再为我工作。 另一个选项是当活动选项卡处于不完整状态时将其他选项卡设置为禁用。 <mat-tab-group> <mat-tab label="Form">Form Here</mat-tab> <mat-tab label="Result" >Result Here</mat-tab> </mat-tab-group> 您可以使用主题替换 Yurzui 解决方案，例如使用模态而不是 window.comfirm()。这将在带有 RxJS 库的 Angular 17 中工作。 （希望对GeekyMonkey等人有帮助） 创建一个新的Subject()变量。 在 file.html 中为您的（点击）创建一个函数 执行：this.NameOfSubject.next();在函数中。 在NgInit中，写入Yurzui的行。 像他一样添加一个 ViewChild 但修改了： @ViewChild('tabs', {static: true}) 选项卡：MatTabGroup; 在第二个函数（Yurzui 的拦截TabChange()）中，您可以调用模态窗口打开方法，然后订阅您的主题。 在订阅方法中，你可以这样做： MatTabGroup.prototype._handleClick.apply(this.tabs, [tab, tabHeader, idx]) 不要忘记在 .html 文件中创建模态，其中有按钮，并通过（单击）调用您之前创建的方法。 然后，代码应该打开您的自定义模式窗口并单击您在新单击函数中设置的 btn，并允许用户更改选项卡。 （无法清楚地输入我的代码，在我的手机上，抱歉）

角桌垫排序箭头未显示

为什么当我在 ngOnit 中分配或放置 sortParams 和 sortDirs 时，排序箭头显示并工作，但当我将其放置或分配在 getUserData() 内时它不起作用？它是因为 o...

角度材质设计<mat-step>数据未显示

我正在以角度安装Material，并在添加步进器html代码、css并导入app.module.ts文件中的所有mat模块后，但现在步进器正在显示，但步进器数据在html中不可见 我正在以角度安装材质，并在添加步进器 html 代码、css 并导入 app.module.ts 文件中的所有 mat 模块后，但现在步进器正在显示，但步进器数据在 html 中不可见 <mat-stepper #stepper> <mat-step [stepControl]="firstFormGroup"> <form [formGroup]="firstFormGroup"> <ng-template matStepLabel>Fill out your name</ng-template> <mat-form-field> <mat-label>Name</mat-label> <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required> </mat-form-field> <div> <button mat-button matStepperNext>Next</button> </div> </form> </mat-step> <mat-step [stepControl]="secondFormGroup" label="Fill out your address"> <form [formGroup]="secondFormGroup"> <mat-form-field> <mat-label>Address</mat-label> <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY" required> </mat-form-field> <div> <button mat-button matStepperPrevious>Back</button> <button mat-button matStepperNext>Next</button> </div> </form> </mat-step> <mat-step> <ng-template matStepLabel>Done</ng-template> <p>You are now done.</p> <div> <button mat-button matStepperPrevious>Back</button> <button mat-button (click)="stepper.reset()">Reset</button> </div> </mat-step> </mat-stepper> 模块 import:[ MatCheckboxModule, MatDialogModule, MatStepperModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatSlideToggleModule, MatButtonToggleModule, MatIconModule ], declarations:[ HomeComponent ] 我正在以角度安装材质，并在添加步进器 html 代码、css 并导入 app.module.ts 文件中的所有 mat 模块后，但现在步进器正在显示，但步进器数据在 html 中不可见 如Angular Material 入门中所述，您需要将 BrowserAnimationsModule 导入到您的应用程序中。 为 Angular Material 设置浏览器动画： 将 BrowserAnimationsModule 导入到您的应用程序中可以启用 Angular 的动画系统。拒绝此项将禁用大多数 Angular Material 的动画。 对于非独立组件 Angular 应用程序，将 BrowserAnimationsModule 添加到根模块的 imports 数组中。 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule ({ imports: [ BrowserAnimationsModule, ], ... }) export class class AppModule {} 对于独立组件 Angular 应用程序，导入 provideAnimations。 import { provideAnimations } from '@angular/platform-browser/animations'; bootstrapApplication(App, { providers: [provideAnimations()] });

升级到 Angular Material 17 后出现错误：@include mat.legacy-core() 和 @import "@angular/material/theming"；

升级到 Angular Material 17 后，我在 Angular 应用程序的代码库中遇到了两个不同的问题： @include mat.legacy-core() 错误： 当使用指令 @include ...

角度类型控件看不到类型

我正在更新一些遗留表单，使其类型更加强健，从而修复 eslint 错误。我不断遇到这样的问题：抽象控件上的 .value 运算符会引发 IDE 错误“Un...

按钮单击事件问题最新面板未在 mat-expansion-panel 中打开

单击 mat-expansion-panel-header 内的按钮，每当单击此按钮时，都会插入新面板并仅打开最新插入的面板。 我在打开这个最新面板时遇到问题。 **HTML...

材质表未渲染任何数据

我正在尝试角材料表组件。由于某种原因，它不会在组件中呈现任何数据，给出错误“无法找到 id 为“id”的列”。我不能下...

mat-menu 未在 Angular 17.2.3 中显示

我尝试在悬停/单击某个图标、按钮时创建一个下拉菜单，但没有任何反应 这是我的 homePageComponent，我尝试了普通方法和查看子方法，但仍然不起作用 html 我尝试在悬停/单击某个图标、按钮时创建一个下拉菜单，但没有任何反应 这是我的 homePageComponent，我尝试了普通方法和查看子方法，但仍然不起作用 html <button mat-icon-button [matMenuTriggerFor]="clickHoverMenu" #clickHoverMenuTrigger="matMenuTrigger" (mouseover)="openOnMouseOver()"> <mat-icon>notifications</mat-icon> </button> <mat-menu #clickHoverMenu="matMenu"> <button mat-menu-item>New items</button> <button mat-menu-item>New items</button> <button mat-menu-item>New items</button> </mat-menu> 打字稿 import { Component,ViewChild } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatMenuModule } from '@angular/material/menu'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; import { MatButtonModule } from '@angular/material/button'; import { MatMenuTrigger } from '@angular/material/menu'; @Component({ selector: 'app-homepage', standalone: true, imports: [ CommonModule, MatMenuModule, MatIconModule, MatInputModule, MatButtonModule, MatMenuTrigger, ], templateUrl: './homepage.component.html', styleUrl: './homepage.component.css' }) export class HomepageComponent { @ViewChild('clickHoverMenuTrigger') clickHoverMenuTrigger!: MatMenuTrigger; openOnMouseOver() { this.clickHoverMenuTrigger.openMenu(); } } 这是我的 app.component.ts 文件 import { Component } from '@angular/core'; import {HomepageComponent} from './homepage/homepage.component'; @Component({ selector: 'app-root', standalone: true, imports: [HomepageComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'project'; } 和app.component.html <app-homepage></app-homepage> 当我尝试在 homePageComponent 或 appComponent 中添加 browserModule、browserAnimationsModule、noopAnimationsMoudle 时，它显示此错误 import { Component } from '@angular/core'; import {HomepageComponent} from './homepage/homepage.component'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @Component({ selector: 'app-root', standalone: true, imports: [HomepageComponent,BrowserModule, BrowserAnimationsModule], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'project'; } NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead. at _BrowserModule (c:/Users/MyPC/ngocmai/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:1258:13) at Object.BrowserModule_Factory (c:/Users/MyPC/ngocmai/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:1282:14) at Object.factory (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:5338:38) at eval (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:5239:43) at runInInjectorProfilerContext (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:3644:9) at R3Injector.hydrate (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:5238:17) at R3Injector.get (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:5106:33) at injectInjectorOnly (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:3831:40) at ɵɵinject (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:3837:42) at useValue (c:/Users/MyPC/ngocmai/node_modules/@angular/core/fesm2022/core.mjs:4880:73 Click outside, press Esc key, or fix the code to dismiss. 这是我的应用程序版本 Angular CLI: 17.2.2 Node: 18.13.0 Package Manager: npm 9.4.0 OS: win32 x64 Angular: 17.2.3 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, platform-server ... router Package Version --------------------------------------------------------- @angular-devkit/architect 0.1702.2 @angular-devkit/build-angular 17.2.2 @angular-devkit/core 17.2.2 @angular-devkit/schematics 17.2.2 @angular/cdk 17.2.1 @angular/cli 17.2.2 @angular/material 17.2.1 @angular/ssr 17.2.2 @schematics/angular 17.2.2 rxjs 7.8.1 typescript 5.2.2 zone.js 0.14.4 import { provideAnimations } from '@angular/platform-browser/animations'; bootstrapApplication(AppComponent, { providers: [ provideAnimations() ]}) 将其添加到您的 main.ts 文件中