angular-material 相关问题

Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用,经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material,即旧版AngularJS框架的Material Design实现。

ngOninit 在第二次渲染时不执行

我有一个模态,当我单击按钮时会调用它,这是模态逻辑: 导出类 SavedSearchesModalComponent 实现 OnInit、OnDestroy { 构造函数(){ console.log('构造...

回答 1 投票 0

如何将具有过滤功能的 Angular 5 表合并到最近的 Angular 18 项目中

我是 Angular 18 的新手。我想将过滤器功能集成到现有项目中。我的项目是使用 Angular CLI 生成的。我不明白如何将旧的 Angular 5 代码与 n...

回答 1 投票 0

如何在 ngx-daterangepicker-material 日期范围选择器中仅显示一个月?

我想在日期范围选择器中仅显示一个月,如下所述。 当前日期范围选择器: 我想要这样的东西:

回答 2 投票 0

如何在对话框中打开 Div 而不中断 Angular with Material 中的数据流?

我有一个使用 Angular Material 的 Angular 应用程序,我想在单击按钮时在对话框中打开一个 div 元素。此外,我需要确保 div 内的数据流保持不变

回答 1 投票 0

Angular - 垫子滑动切换更改颜色

我似乎找不到如何更改开关的颜色.. HTML: ...

回答 3 投票 0

角度材料未安装

我尝试使用 CLI 命令安装 Angular Material:ng add @angular/material 但我不断收到此错误消息 npm 错误!代码1 npm 错误! git dep 准备失败 npm 错误!命令...

回答 1 投票 0

在移动设备上全局禁用 Mat-Tooltip

我正在使用 Angular Material 开发 Angular 应用程序,并且遇到了 mat-tooltip 组件的问题。具体来说,我需要全局禁用生物上触摸事件的工具提示...

回答 1 投票 0

一些 Material 图标未在我的 Angular 项目中渲染

在我的 Angular 项目中,一些 Material 图标似乎没有渲染: 多米诺骨牌 沙漏 其他图标正常渲染。我有

回答 1 投票 0

如何使用“.cdk-overlay-pane”自定义或应用另一个类来进行角度材质垫选择 |垫子对话框

我正在使用 mat-select 来显示选项列表。因此,当您单击 mat-select 输入字段时,它会显示使用 div 和 cdk-overlay-pane 类的选项列表。 我想定制 cdk-overlay-

回答 3 投票 0

cdk-virtual-scroll-viewport 使用角度/弹性布局(行和换行)

我想使用带有弹性布局的虚拟滚动 - 例如以下代码应该适用于虚拟滚动: ... 我想使用带有弹性布局的虚拟滚动 - 例如以下代码应该适用于虚拟滚动: <div fxLayout="row wrap" fxLayoutAlign="start center"> <div *ngFor="let size of fixedSizeData; let i = index" [style.height.px]="size"> <div style="border: 1px dashed; padding: 6px;" [style.height.px]="size - 20"> Item #{{i}} - ({{size}}px) </div> </div> </div> 我做了一个小演示,显示了结果(没有virtualscroll),并尝试用cdk-virtual-scroll-viewport做同样的事情。 只需在您的cdk-virtual-scroll-viewport中添加一个“自定义”类 <!--don't forget give heigth to the ckd-virtual-scroll--> <cdk-virtual-scroll-viewport class="custom" ... [itemSize]="10" style="width: 100%; padding: 12px;height:80vh;"> > .. </cdkvirtual-scroll-viewport> 并添加styles.css .custom .cdk-virtual-scroll-content-wrapper { display: flex; flex-wrap: wrap; } .custom .cdk-virtual-scroll-content-wrapper> div { padding: 2px; flex: 1 1 20%; box-sizing: border-box; height: 100px; } 你的分叉堆栈闪电战

回答 1 投票 0

Angular 18 双向数据绑定

无法绑定到“ngModel”,因为它不是“textarea”的已知属性 组件.html 无法绑定到“ngModel”,因为它不是“textarea”的已知属性 组件.html <textarea rows="6" [(ngModel)]="enteredValue"></textarea> <button (click)="onSavePost()">save</button> <p>{{ newPost }}</p> 组件.ts import { Component } from '@angular/core'; @Component({ selector: 'app-post-create', standalone: true, templateUrl: './post-create.component.html', styleUrl: './post-create.component.css' }) export class PostCreateComponent { newPost="NO content Here"; enteredValue=''; onSavePost(){ this.newPost = this.enteredValue; } } app.component.ts import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { PostCreateComponent } from './post/post-create/post-create.component'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet,FormsModule,PostCreateComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'Project_ng_demo'; } 这里不是 agnular 18 中的 app.module.ts 文件 在app.component.ts中导入FormsModule。 从 '@angular/forms' 导入 { FormsModule }; 问题是,当使用独立组件时,子组件不会自动从父组件获取导入,因此 PostCreateComponent 也需要导入 FormsModule。 import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-post-create', standalone: true, imports: [FormsModule], templateUrl: './post-create.component.html', styleUrl: './post-create.component.css' }) export class PostCreateComponent { newPost="NO content Here"; enteredValue=''; onSavePost(){ this.newPost = this.enteredValue; } }

回答 1 投票 0

Angular Material 3 是否有用于边距/填充、Flexbox 等的 CSS 辅助类

Angular Material 3 中是否有用于 margin/padding、flexbox 等的内置 CSS 辅助类? 我看到 Vuetify、Tailwind、Bootstrap 有很多辅助类(例如 px-4、ma-6、mx-auto 等)....

回答 1 投票 0

Angular Material 15 (mdc) - 如何更改 matToolTip 的宽度?

如何更改 matToolTip 的宽度(Angular Material 15 - 新的 MDC 类)。我想在一行中显示整个工具提示。 这是我的代码: 如何更改 matToolTip 的宽度(Angular Material 15 - 新的 MDC 类)。我想在一行中显示整个工具提示。 这是我的代码: <div matTooltip="This is a super loooooooooong tooltip This is a super loooooooooong tooltip"> <button disabled="true">Next</button> </div> ::ng-deep .mdc-tooltip__surface { width: 500px !important; } 但似乎没有任何效果。 提前致谢! 🙌 ::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{ max-width: 500px; } 这段代码应该可以工作,但我认为这不是正确的方法。我也有关于调整 mdc 组件大小的问题。

回答 1 投票 0

我们如何在 Angular 17 中使用 Angular Material UI

如果没有app.module.ts文件那么我们如何使用角度材质,因为要使用角度材质首先我们需要导入材质模块,还有其他方法吗? 我试着...

回答 1 投票 0

Angular Material 选项卡内的 Fabricjs 画布不起作用

我一直在尝试在角度材料选项卡(material.angularjs.org/latest/demo/tabs)内使用 Fabric.canvas 但这似乎不起作用。 最后我希望有多个带有多个

回答 3 投票 0

更改材质滑块拇指大小

所以我在这个项目中使用了 Mat Slider,并在其拇指上显示文本值,但拇指尺寸对于我的文本来说太小了! 我寻找了很多改变拇指大小的方法,但我没有......

回答 6 投票 0

在 Angular 中对从父组件传递到子组件的列进行排序时出现问题

我正在尝试将列从父组件传递到 Angular 中的子组件,并且在列上排序时遇到问题。这是我的代码: 父组件 我正在尝试将一列从 Angular 中的父组件传递到子组件,并且在该列上排序时遇到问题。这是我的代码: 父组件 <table-sorting-example matSort> <ng-container matColumnDef="another"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Another</th> <td mat-cell *matCellDef="let element">{{element.another}}</td> </ng-container> </table-sorting-example> 子组件 <table mat-table [dataSource]="dataSource" matSort> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Position</th> <td mat-cell *matCellDef="let element">{{element.position}}</td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th> <td mat-cell *matCellDef="let element">{{element.name}}</td> </ng-container> <ng-container matColumnDef="weight"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Weight</th> <td mat-cell *matCellDef="let element">{{element.weight}}</td> </ng-container> <ng-container matColumnDef="symbol"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Symbol</th> <td mat-cell *matCellDef="let element">{{element.symbol}}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> 子组件 TS 文件 import { AfterViewInit, Component, ContentChildren, QueryList, ViewChild, } from '@angular/core'; import { MatSort, Sort } from '@angular/material/sort'; import { MatColumnDef, MatTable, MatTableDataSource, } from '@angular/material/table'; export interface PeriodicElement { name: string; position: number; weight: number; symbol: string; another: string; } const ELEMENT_DATA: PeriodicElement[] = [ { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', another: 'A' }, { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', another: 'B' }, { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', another: 'C' }, { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', another: 'D' }, { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', another: 'E' }, { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', another: 'F' }, ]; /** * @title Table with sorting */ @Component({ selector: 'table-sorting-example', styleUrls: ['table-sorting-example.css'], templateUrl: 'table-sorting-example.html', }) export class TableSortingExample implements AfterViewInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = new MatTableDataSource(ELEMENT_DATA); @ViewChild(MatTable) myTable: MatTable<PeriodicElement>; @ViewChild(MatSort) sort: MatSort; @ContentChildren(MatColumnDef) private customCols: QueryList<MatColumnDef>; constructor() {} ngAfterViewInit() { this.dataSource.sort = this.sort; for (let col of this.customCols) { this.myTable.addColumnDef(col); this.displayedColumns.push(col.name); } } } 如您所见,我在父组件和子组件上都使用了 matSort。但是,对“另一”列进行排序似乎不起作用。其他列按预期排序。 我检查了Angular文档和其他在线资源,但找不到这个问题的解决方案。有人可以帮助我理解为什么“另一个”列上的排序不起作用以及如何修复它吗? 您可以在 stackblitz 上找到完整代码 您将 customCols 和 addColumnDef 添加到材料表中。我的猜测是您必须对自定义列进行类似的操作才能进行排序。您是否尝试过在 register 上使用 MatSort 方法。比如: for (let col of this.customCols) { this.myTable.addColumnDef(col); this.matSort.register({id: col.name, start: 'desc', disableClear: false}); this.displayedColumns.push(col.name); } 有人发现如何解决这个问题吗?

回答 2 投票 0

为什么mat-date的日历样式坏了?

我在我的Angular项目中使用了mat-date,但是当点击图标显示日历时,我发现样式全部损坏了 显示日历效果 我尝试注释掉其他

回答 1 投票 0

如何在 Angular 类中定义自定义属性

我在 Angular 17 项目中开发了一个 mat-table,但是当应用程序运行时“productName”自定义属性在表中不起作用。 <...

回答 1 投票 0

如何更改活动选项卡的墨栏颜色?

是否可以更改活动选项卡的墨栏颜色? 默认情况下,墨水栏为蓝色。请参阅此处的示例。 我在SCSS中尝试过这个,但它不起作用。 .mat-tab-标签-容器{ .mat-...

回答 6 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.