Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用,经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material,即旧版AngularJS框架的Material Design实现。
将应用程序从 ng 15(我认为)迁移到 18。 我对日期选择器组件感到头疼。 我已经删除了我的实现(带有绑定)并替换为教程中的实现(角度
我正在使用垫分页器,它看起来像这样 唯一的问题是我想擦除选择输入处出现的蓝色边框,但我不知道该怎么做。
我目前正在将俱乐部应用程序从 Angular 9 重做到 18,因为它没有得到很好的维护。我试图保留尽可能多的前端,因此也想要......
在哪里可以找到@angular/material 主题方法?
我无法自定义主题查找功能,例如: @include mat.core(); mat.define-palette(); 垫调色板(); mat.define-light-theme();` 在哪里可以找到有关这些功能的官方文档? 那...
我的 Angular Material v18 应用程序允许用户设置其主题,但一个组件组(“订单控件”)具有“购买”和“出售”两种语义颜色(例如...
标题: 如何在角度材质多选下拉列表中禁用 Ctrl+A(全选)? 问题: 我正在开发一个 Angular 项目,其中使用 Angular 材质有一个多选下拉列表。我想要...
我的 Angular Material v18 应用程序允许用户设置主题,但一个组件组(“顺序控件”)需要独立于主题。这是一个 HTML 版本……
我生成(nggenerate@angular/material:my--own-theme)在own-theme.scss中有这样的代码 不知何故,它适用于包含在角度材料中的调色板。但我想用我自己的...
我正在使用 DomPortalOutlet 创建一个弹出窗口,并将 ComponentPortal 附加到出口,以允许组件在新窗口中显示。见下文: this.externalWindow = window.open( ''...
Angular Material 12 Mat-Spinner 颜色
我想在我的打字稿代码中动态更改 mat-spinner 的颜色。由于某种原因,我的代码不再工作。下面的代码显示了它是如何工作的。我需要帮助。 spinnerStyle()...
将带有 mat-expansion-panel 的组件添加到 mat-accordian
我有一个带有垫子扩展组件的组件,我想将该组件放置在垫子手风琴中。除了样式之外,这都有效。 我有一个带有 mat-expansion-component 的组件,我想将此组件放在 mat-accordian 中。除了样式之外,这都有效。 <mat-accordion> <app-panel1></app-panel1> <app-panel2></app-panel2> </mat-accordion> app-panel.html panel1 和 panel2 具有相同的格式。 <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> <mat-expansion-panel-header> <mat-panel-title> Title </mat-panel-title> <mat-panel-description> Description </mat-panel-description> </mat-expansion-panel-header> <ng-template matExpansionPanelContent> Content </ng-template> </mat-expansion-panel> 发生了什么: 我想要什么: 取自角度材料文档 您的问题来自: .mat-accordion .mat-expansion-panel:last-of-type { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .mat-accordion .mat-expansion-panel:first-of-type { border-top-right-radius: 4px; border-top-left-radius: 4px; } 既然这样显示,那就是在申请开始和结束 <app-panel1> <mat-expansion-panel></mat-expansion-panel> </app-panel1> 因此您可以在组件中覆盖该属性,使其不被应用。例如在 app-panel1.component.scss :host{ .mat-expansion-panel:last-of-type { border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; } } 但这也会破坏需要圆角矩形的扩展情况下的样式。
我正在尝试将 Angular Material 添加到已对 HTML 元素使用某些样式的现有应用程序中。问题在于 Material 主题覆盖了这些元素的现有 CSS...
我想选择数据,我之前在后端部分设计为不同的表,根据这个选择的操作进行选择并保存。使用角垫似乎是合乎逻辑的...
我正在尝试更新 Angular 4 项目以达到 Angular 17,当我更新到 Angular 11 时,我注意到某些样式已损坏,但似乎没有任何问题。 我认为重要的事情: 我以前...
我正在开发一个带有仪表板屏幕延迟加载功能的 Angular 应用程序。我遇到了一个问题,即延迟加载仪表板时子菜单无法正常运行。下面...
将 Angular Material M2 主题转换为 M3
Angular Material 团队的文档相当稀缺,并且缺少有关如何将现有主题从 M2 过渡到 M3 的关键信息。在我们的情况下,我们有以下合作...
如何在 Angular Material 3 中生成具有特定原色的调色板
我需要在 Angular Material 3 中生成一个调色板来实现具有特定原色的主题。按钮和其他一些控件应该是这种特定的颜色。例如。 #C9007E。我正在关注...
我是角度新手。在我的项目中显示了产品列表及其正常工作。 我的 HTML 代码如下: ... 我是角度新手。在我的项目中显示了产品列表及其正常工作。 我的 HTML 代码如下: <table mat-table [dataSource]="list_product" style="width: 20%;"> <!-- id Column --> <ng-container matColumnDef="id" style="width: 20%;"> <th mat-header-cell *matHeaderCellDef style="align-items: center;"> id </th> <td mat-cell *matCellDef="let list_product"> {{list_product.id}} </td> </ng-container> <!-- description Column --> <ng-container matColumnDef="description"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let list_product"> {{list_product.description}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> 我的 TypeScript 代码是 - import { Component, OnInit,ViewChild } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { analyzeAndValidateNgModules } from '@angular/compiler'; import { MatPaginator} from '@angular/material/paginator'; import { MatTableDataSource} from '@angular/material/table'; @Component({ selector: 'app-basic', templateUrl: './basic.component.html', styleUrls: ['./basic.component.scss'] }) export class BasicComponent implements OnInit { public list_product:any=[]; displayedColumns: string[] = ['id', 'description']; @ViewChild(MatPaginator) paginator: MatPaginator; constructor(private http:HttpClient) { } ngOnInit(): void { this.get_data(); this.list_product.paginator = this.paginator; } get_data(){ this.http.get<any>("http://localhost:3000/listp").subscribe( res => this.list_product = res ) } } 分页不起作用,所有列表都会显示。分页按钮在 html 文件中不起作用。 对于客户端分页,MatTableDataSource 内置分页、排序和过滤功能。 按照以下步骤操作 - 使用 MatTableDataSource 类型作为 dataSource 并用空数组初始化它 收到数据后设置 data 的 MatTableDataSource 属性 使用 paginator 获取表格 @ViewChild 的参考 一旦视图初始化,就实现 AfterViewInit 设置 paginator 的 MatTableDataSource 属性 您的最终组件代码应该类似于 - export class BasicComponent implements OnInit, AfterViewInit { public list_product = new MatTableDataSource<any>([]); // <-- STEP (1) displayedColumns: string[] = ['id', 'description']; @ViewChild(MatPaginator) private paginator: MatPaginator; // <-- STEP (3) constructor(private http:HttpClient) { } ngOnInit(): void { this.get_data(); } get_data(){ this.http.get<any>("http://localhost:3000/listp").subscribe( res => this.list_product.data = res // <-- STEP (2) ); } ngAfterViewInit(): void { this.list_product.paginator = this.paginator; // <-- STEP (4) } } 您应该浏览文档以获取更多详细信息。 如果您需要后端对结果进行分页,我有这样的分页器 <mat-paginator #paginator (page)="pageChangeEvent($event)" [length]="totalResults" [pageSize]="pageLimit" [pageIndex]="pageIndex" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of data"> </mat-paginator> 然后在TS文件中的pageChangeEvent上 pageChangeEvent(event: { length: number; pageIndex: number; pageSize: number; previousPageIndex: number; }) { this.pageLimit = event.pageSize.toString(); this.pageIndex = event.pageIndex; this.getMoreData(); } getMoreData() { this.visitService .getFollowUps( this.pageLimit, this.pageIndex, //any other params ) .subscribe( (data: any) => { this.loading = false; //for other uses not in the table this.data = data.results; this.pageIndex = data.page_index; this.pageLimit = data.page_limit; this.totalResults = data.total_results; //assign it to the data source as well this.dataSource.data = data.results; }, (err) => { this.loading = false; console.log(err); } ); }
使用 Angular Material CDK 拖放实现可变高度的多列拖放卡片
我正在开发一个项目,我需要显示可拖动卡片的列表。我使用材质 CDK 拖放来实现此功能。每张卡片代表一个人并包含一个可变的数字...
我想要一个 Angular Material v18.1 列表,其中包含一些强调的内容和几个按钮,如下所示: 但是当我将 matListItemTitle 指令添加到名称中时,事情就会出错:...