angular-material 相关问题

角度材质设计<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 文件中

如何根据属性将类应用到活动的“角度材质”选项卡？

我有一个名为editMode的属性。当 editMode 为 true 时，如何将此 CSS 类仅应用于活动选项卡？ .tab-活动-编辑模式{ 顶部边框：无！重要； 底部边框：2px 实心 #0078...

错误错误：带有 Angular Material ang 标签的 NG0502 <p>

按照 Angular Material 的指南，我想将此代码放入我的表单中。 但出现错误： 错误错误：NG0502：在水合过程中，Angular 无法使用“

为什么我无法编辑垫子按钮填充？

mat-button的默认填充，我需要订阅默认填充（16px） 我一直在尝试设置垫子按钮的填充，但组件的样式没有改变。我能做什么，我有...

为什么粘性/固定元素的一部分会在移动浏览器中脱离屏幕？

在桌面浏览器中一切正常。但在移动浏览器中，无论如何首先滚动约 20px。较高元素中的所有边距和填充 = 0。你能帮我解决这个问题吗？ HTML： 在桌面浏览器中一切正常。但在移动浏览器中，无论如何首先滚动约 20px。较高元素中的所有边距和填充 = 0。你能帮我解决这个问题吗？ HTML： <mat-toolbar color="primary"> <app-my-svg style="min-width: 50px; max-width: 70%; padding-top: 10px;" #svgAnima class="svg-image" id="svgAnima" [mat-menu-trigger-for]="menu"> </app-my-svg> <div class="hamburger"> <mat-menu #menu="matMenu"> <nav class="menu"> <a mat-menu-item (click)="item.fun ? item.fun() : '' " *ngFor="let item of menuItems">{{ item.label }} </a> </nav> </mat-menu> </div> <div class="navBar"> <button mat-flat-button color="primary" (click)="item.fun ? item.fun() : '' " *ngFor="let item of menuItems" class="menuBar"> {{item.label }} </button> </div> <span>Zastroycogramm </span> </mat-toolbar> CSS： mat-toolbar { position: -webkit-sticky; position: sticky; top: 0px; left: 0px; z-index: 50; max-height: 200px; width: 100%; } .menu { flex: 1; font-family: Roboto, 'Helvetica Neue', sans-serif; } @media (min-width: 1000px) { .navBar { display: flex; width: 100%; align-items: center; font-family: Roboto, 'Helvetica Neue', sans-serif; } .hamburger { display: none; } } @media (max-width: 999px) { .navBar { display: none; } .hamburger { display: flex; width: 100%; } } 我是一名新手程序员，下面我将添加您需要澄清这个问题的信息 我刚刚在CSS html中添加了body { height: 100% }

如何使 HTML 文本不可选择用于输入

我一直在尝试使 HTML 输入中的某些文本在角度上无法选择。 我参考过之前的问题，例如 make html text unselectable 目前的文本是我...

更改（增加）Mat-Form-Field 的边界半径

我正在一个使用 Material 的 Angular 项目中工作。 我有一些带有轮廓外观输入的垫子表单字段。我想更改轮廓的边框半径（增加它）。 我读了一遍...

错误：mat-form-field 必须包含 MatFormFieldControl 并且表单字段的样式不正确

我正在尝试为我的应用程序构建一个表单。这些字段是可见的，但没有按照 Angular Material 的规定显示。另外，mat-toolbar 组件无法正确显示...

有没有办法使用角度材料拖放来调整大小

我正在使用 Angular 和 Material 创建一个 Web 应用程序，我希望能够拖放和调整我的部分的大小。有没有办法使用 Angular Material 拖放 CDK 来完成？

如何使用 *ngFor 连接 Angular 中 p-dropdown 选项中 optionLabel 中的两个属性？

我需要连接两个属性并将其显示在 Angular 的 p 下拉列表中的 optionLabel 中？我可以在 mat-select 中执行此操作，但不能在 p-dropdown 中执行此操作。 任何转换以下内容的帮助...

角度材质滑块拖动时数据绑定

我正在尝试使用材质滑块控制音频音量。就像 YouTube 音频滑块一样。我使用两种方式的数据绑定，如下所示： 我正在尝试使用材质滑块控制音频音量。就像 YouTube 音频滑块一样。我使用这样的两种方式数据绑定： <mat-slider min="0" max="1" step="0.01" [(value)]="settingsService.audioTick.volume"></mat-slider> 问题是，只有当我停止拖动滑块时，该值才会更新。这是一种糟糕的用户体验，因为我无法立即得知该音量是否良好。所以我需要在拖动时进行数据绑定。 这是一个 StackBlitz：https://stackblitz.com/angular/rojampjmlap 有什么想法吗？ 您可以使用 [value] 属性绑定语法将 someValue 作为 @Input 传递给 MatSlider。 MatSlider 有一个定义为 @Output 的 input 属性，当 input 值更改时会触发该属性。您可以收听该内容，然后将作为 $event 数据返回的任何内容重新分配给 someValue。 在这里，尝试一下： 模板： <mat-slider (input)="someValue = $event.value" [value]="someValue"> </mat-slider> {{ someValue }} 组件： import {Component} from '@angular/core'; @Component({...}) export class SliderOverviewExample { someValue = 0; } 这是更新的 示例 StackBlitz 供您参考。 您需要绑定到 input 输出属性才能获取实时数据更改。示例： <mat-slider min="0" max="1" step="0.01" (input)="settingsService.audioTick.volume = $event.value" [value]="settingsService.audioTick.volume" />

为什么我无法将边框应用于角度垫表行？

我有一个简单的角材料表： 姓名 &... 我有一个简单的角材料表： <table mat-table [dataSource]="scoreboardData"> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <ng-container matColumnDef="totalScore"> <th mat-header-cell *matHeaderCellDef> Total Score </th> <td mat-cell *matCellDef="let element"> {{element.totalScore}}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> 我想在行之间添加一些额外的边距以及边框，甚至可能添加一些填充。我发现我可以更改行的背景颜色，但无法对行应用边距、填充或边框。 tr.mat-row { background: #2f5b98; /* Old browsers */ background: -moz-linear-gradient(top, rgba(74,144,239,1) 20%, rgba(0,0,0,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a90ef', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ margin-top: 16px; padding: 8px; border: 1px solid #FAFF00; } 我确信这很简单，但我无法弄清楚是什么阻止我将这些样式应用到该行。同样，我可以更改背景、其中的字体和其他几种样式，但不能更改这三种特定样式（填充、边距、边框）。 编辑：我已经确定任何 html 表格都不允许使用填充和边距。但边界仍然让我困惑。 您的样式问题与 Angular Material 表格无关，而与一般的 HTML 表格有关。如果您搜索如何设计 table 的样式，例如向行或边距添加边框，您会找到各种答案和建议。 您基本上无法直接将 margin 或 padding 添加到表格行 <tr>。 margin 适用于除 table-caption、table 和 inline-table 之外的表格显示类型的元素之外的所有元素。 padding 适用于除 table-row-group、table-header-group、table-footer-group、table-row、table-column-group 之外的所有元素 和表格列。 解决方案 如何为表格行设置 border 以及指定 margin 和 padding 取决于您使用的 border model（collapse 或 separate）。 分离边框模型：border-collapse: seperate 在分离边界模型中，边缘与 单元格的边界。 （因此，在这个模型中，可能存在间隙 行、列、行组或列组之间，对应 到“边框间距”属性。） 在此模型中，每个单元格都有单独的边框。这 'border-spacing' 属性指定边框之间的距离 的相邻单元格。 (...) 行、列、行组和列组 不能有边界（即用户代理必须忽略边界 这些元素的属性）。 1。解决方案：如果你想要border，margin和padding，你可以这样做： td.mat-cell { /* row padding */ padding: 16px 0; /* row border */ border-bottom: 1px solid #ffa600; border-top: 1px solid #ffa600; } td.mat-cell:first-child { /* row border */ border-left: 1px solid #ffa600; } td.mat-cell:last-child { /* row border */ border-right: 1px solid #ffa600; } table { /* row spacing / margin */ border-spacing: 0 8px !important; } https://stackblitz.com/edit/angular-cjxcgt-wtkfg4 折叠边框模型：border-collapse: collapse 行、列、行组、列组的边缘 折叠边界模型与假设的网格线一致 单元格的边界居中。 （因此，在这个模型中， 行一起完全覆盖桌子，不留任何间隙；同上 列。） 在折叠边框模型中，可以指定以下边框： 包围单元格、行、行组、列和列的全部或部分 团体。 (...)此外，在此模型中，表格没有填充（但有边距）。 2。解决方案：如果您只想要一行border和padding，但行之间没有间距/边距，您可以这样做： table { border-collapse: collapse; } th { /* row border */ border-bottom: 1px solid #ffa600; } td.mat-cell { /* row padding */ padding: 20px 0; border: none; } tr.mat-row { /* row border */ border: 1px solid #ffa600; } https://stackblitz.com/edit/angular-cjxcgt-xphbue mat-footer-row, mat-header-row, mat-row { border-bottom-width: 10px; } 尝试这个代码。这会起作用:) .mat-cell { padding: 16px 0; border-top: 1px solid rgb(97 82 82); border-right: 1px solid rgb(97 82 82); } .mat-cell:first-child { border-left: 1px solid rgb(97 82 82); } .mat-row:first-child { border-left: 1px solid rgb(97 82 82); } .mat-row:last-child { border-bottom: 1px solid rgb(97 82 82); } .mat-column { border-right: 1px solid rgb(97 82 82); } .mat-column:first-child { border-left: 1px solid rgb(97 82 82); } .mat-header-cell:first-child { border-left: 1px solid rgb(97 82 82); } .mat-header-cell { border-right: 1px solid rgb(97 82 82); border-top: 1px solid rgb(97 82 82); } table { border-spacing: 0 8px !important; } 最简单、更好的方法是利用有角材料的力量。 使用 mat-table、mat-header-cell、mat-cell 代替 table、th、td。最后使用 mat-header row 和 mat-row 而不是 th 和 td。然后你可以根据需要为每一行加边框。 实例：Stackblitz

尝试使用角度材料的下拉菜单测试组件时，角度 17 中出现“意外的合成属性 @transitionMessages 发现”错误

我的应用程序运行良好。当我尝试测试该组件时，出现标题中提到的错误。 导入我的组件 从 '@angular/core' 导入 { Component } ； 从 '@

我正在尝试安装角度材料，我给出了命令 npm install @angular/material @angular/cdk，我面临以下问题

npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法解决依赖性 树 npm 错误！ npm 错误！解决时：[email protected] npm ERR！ 发现：@angular/[email protected] npm 错误！ 节点_模块/@angu...

Angular Material Table：“无法绑定到‘dataSource’，因为它不是‘table’的已知属性”

我正在尝试从 Angular [email protected] 在我的 Angular 应用程序中添加一个表格（如此处所示）。 我复制/粘贴了 Angular Material 官方文档中的代码，但仍然收到错误： 不能...