angular-material 相关问题

使用反应式数组进行角度材料表排序

我正在尝试以 formArray 作为输入数据源对角度材料表实现排序/过滤。 StackBlits 代码链接 数据源 = new MatTableDataSource([]); 我正在尝试以 formArray 作为输入数据源对角度材料表实现排序/过滤。 StackBlits 代码链接 dataSource = new MatTableDataSource([]); <table mat-table [dataSource]="formdataarray.controls" multiTemplateDataRows class="mat elevation-z8" matSort > <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay" > <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column}}</th> <td mat-cell *matCellDef="let element"> {{ element.value[column] }} </td> </ng-container> 但是排序/过滤不起作用 您有两个选择： 使用普通数组formdataarray.controls作为dataSource并实现所有数据源方法，如过滤器，按您自己的排序。或者编写自定义 CDK DataSource 实现。另请参阅https://blog.angular-university.io/angular-material-data-table/ 使用MatTableDataSource并调整过滤和排序逻辑以支持AbstractControl对象。 html <table mat-table [dataSource]="dataSource" ts ngOnInit() { // fill FormArray ... this.dataSource.data = this.formdataarray.controls; this.dataSource.sortingDataAccessor = (data: AbstractControl, sortHeaderId: string) => { const value: any = data.value[sortHeaderId]; return typeof value === 'string' ? value.toLowerCase() : value; }; const filterPredicate = this.dataSource.filterPredicate; this.dataSource.filterPredicate = (data: AbstractControl, filter) => { return filterPredicate.call(this.dataSource, data.value, filter); } } 叉式Stackblitz 此外，如果您想向 FormArray 添加新项目，您也应该更新 this.dataSource.data。另请参阅 使用 FormArray 的 Angular Material 可编辑表 您还需要添加事件(matSortChange)=sortTable($event) 前往table标签 并在组件内添加sortTable逻辑 需要 ngAfterViewInit 才能工作 import { MatTableDataSource } from '@angular/material/table'; import { MatSort } from '@angular/material/sort'; ... @ViewChild(MatSort, {static: false}) sort: MatSort ... ngOnInit() { this.getYourData$.subscribe(d => this.data = new MatTableDataSource(d)); } ngAfterViewInit(): void { this.data.sortingDataAccessor = (data: AbstractControl, sortHeaderId: string) => { const value: any = data.value[sortHeaderId]; return typeof value === 'string' ? value.toLowerCase() : value; }; this.data.sort = this.sort; // where this.sort defined above. this.data.filterPredicate = (data: AbstractControl, filter) => { // return true or false on data. } } ... html <table matSort ... 为了寻找这个问题的答案，我也经历了一段漫长的旅程。就我而言，还涉及过滤和分页。我在这篇文章here中总结了我的经验。

Angular Material - 带电子邮件验证的芯片

我正在尝试创建一个带有输入的表单，使用芯片将消息发送到各种电子邮件。我几乎可以使用它，但我不知道当您编写 inva 时如何正确显示消息错误...

角度4，md2-datepicker重置值

我在 web 应用程序中使用 md2-datepicker 和反应式表单，但我需要重置所选值。 有人知道我该怎么做吗？ 我尝试做这样的事情，但它对我不起作用。我...

无法弄清楚为什么@Angular/Material datepicker中缺少某些样式

我们有一个 Web 应用程序，正在从 Angular v16 更新到 v18。 99% 的东西看起来不错并且工作得很好，但我有一个问题我无法弄清楚，那就是日期 p 的样式...

我已将 Angular 版本 8、9、10 升级到 16。收到此错误 NG8001：“mat-icon”不是已知元素

我已将 Angular 版本 8、9、10 升级到 16。在 Angular 16 上面临以下问题。我已经导入了模块文件中的所有材质模块。然后它也会给出错误。 在...

在 mat-tab-group 上制作粘性标题

我正在使用 mat-tab-group，我希望当我向下滚动到内容时固定选项卡标题。因此，我修复了选项卡内容的高度。我可以滚动浏览具有固定标题的内容。但是，

无法将 observable 绑定到 mat 芯片自动完成

我有一个搜索引擎，我需要注册可观察并获取下拉自动完成建议，但即使触发了可观察，我可以在点击内看到我似乎无法加载列表...

我已将 Angular 版本 8、9、10 升级到 16。收到此错误 NG8001：“mat-icon”不是已知元素

我已将 Angular 版本 8、9、10 升级到 16。在 Angular 16 版本上面临以下问题。我已经导入了模块文件中的所有材质模块。然后它也会给出错误。

带有角度的可拖动和可调整大小的div

我正在尝试创建可调整大小的 div 容器，并且它们是可拖动的。 我使用了角度材料拖放和角度可调整大小的元素 这是解决方法 https://stackblitz.com/edit/angu...

为什么<mat-pseudo-checkbox>自动创建

我们最近从 v15 迁移到 Angular 17。对于 中的所有下拉菜单，都会自动创建，并且会看到所选选项的刻度线。有人可以建议如何删除这些伪代码吗

角垫按钮链接到外部网址

Angular 6 (https://angular.io/) 新项目，利用 Material 组件 (https://material.angular.io/) ~ 如何从 mat-button 组件导航到外部 URL。 超文本标记语言 Angular 6 (https://angular.io/) 新项目，利用 Material 组件 (https://material.angular.io/) ~ 如何从 mat-button 导航到外部 URL成分。 HTML <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-menu #menu="matMenu"> <button mat-menu-item>Item 1</button> <button mat-menu-item>Item 2</button> </mat-menu> 打字稿 import {Component} from '@angular/core'; @Component({ selector: 'menu-overview-example', templateUrl: 'menu-overview-example.html', styleUrls: ['menu-overview-example.css'], }) export class MenuOverviewExample {} 实时编辑：https://stackblitz.com/angular/maeymnkvlrq 我相信作为新手我错过了一些明显的东西，但无法找到我的问题的答案。 您可以将 button 属性更改为具有与按钮相同设计的 a <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-menu #menu="matMenu"> <a href="http://www.google.com" mat-menu-item>Item 1</a> <button mat-menu-item>Item 2</button> </mat-menu> 使用类似这样的按钮作为指向外部 URL 的按钮： <a mat-raised-button href="https://stackoverflow.com/">Stackoverflow</a> 你可以使用 <mat-menu #menu="matMenu"> <button mat-menu-item onClick="window.open('//google.com')">Item 1</button> <button mat-menu-item onClick="window.open('//yahoo.com')">Item 2</button> </mat-menu> 演示 Stackblitz 使用 window.open 可以，但如果您正在执行“mailto”之类的操作，您最终会在浏览器中打开一个不必要的空白选项卡。我建议使用“location.href =”代替...所以...简而言之...无论是按钮还是菜单并不重要，在您的 HTML 中， <button mat-raised-button (click)="emailSupport()" style="width:180px;"> Contact Support </button> 然后在你的 .ts 文件中... import {Component} from '@angular/core'; @Component({ selector: 'menu-overview-example', templateUrl: 'menu-overview-example.html', styleUrls: ['menu-overview-example.css'], }) export class MenuOverviewExample { ... emailSupport(){ location.href = "mailto:[email protected]?subject='I need help'&body='write some message'"; } } 使用 click 事件和 window.open 方法导航到外部 URL <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-menu #menu="matMenu"> <button mat-menu-item (click)="onClick()">Item 1</button> <button mat-menu-item (click)="onClick()">Item 2</button> </mat-menu> 组件： import {Component} from '@angular/core'; @Component({ selector: 'menu-overview-example', templateUrl: 'menu-overview-example.html', styleUrls: ['menu-overview-example.css'], }) export class MenuOverviewExample { onClick() { window.open("URL"); }} 现场演示 这将根据您的要求创建一个漂亮的菜单图标， <a style="cursor: pointer"> <i class="material-icons" style="color:#757575" [matMenuTriggerFor]="selectMenu" matTooltip="Menu">more_vert</i></a> <mat-menu #selectMenu="matMenu"> <button mat-menu-item>Item 1</button> <button mat-menu-item>Item 2</button> </mat-menu> 你可以看到这段代码是如何工作的 堆栈闪电战 我创建了 ngx-href 库来正确处理此类棘手的问题。 你只需要 npm i ngx-href 将模块导入到您的app.module.ts文件中 import { NgxHrefModule } from 'ngx-href' imports: [ NgxHrefModule.forRoot({}), ] 导入指令 import { NgxHrefDirective } from 'ngx-href' imports: [ NgxHrefDirective, ] 然后您可以使用 mat-button 和 href 打开外部网址 <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-menu #menu="matMenu"> <button mat-menu-item href="https://external-url.com">Item 1</button> <button mat-menu-item href="https://external-url.com">Item 2</button> </mat-menu> 如果您有内部 url，库将使用 Angular 路由器系统处理它；）

Angular Material 18 - Mat-paginator [长度] 问题

我的 mat-paginator 组件有问题。 显示的列： string[] = ['id', 'name']; 数据源 = new MatTableDataSource(); 总项目数 = 0； @ViewChild(MatPaginator)

将角度材料添加到基于角度元素的微前端

我有一个 Angular Web 组件，是在 @Angular/elements 的帮助下构建的。 该 Web 组件已经在我的网站上运行了几个月，因此大部分代码、部署和加载都没有问题。 该项目...

Angular Elements 未正确包含 Material 主题 css

我已将 Angular Material 包含在我的 Angular 元素项目中。我已经包含了文档建议的所有参考资料，但是当我构建看起来像有角度的材料主题时，不包括...

角度材质不适用于角度元素

我正在尝试使用角度材质创建一组角度元素。当我运行 Angular 应用程序时，一切正常。然而，一旦我导出我的元素，使用 Angular Material 的东西就只是

在任何用户交互之前显示 mat-form-field 验证消息

这是参考代码， 输入报价名称 这是参考代码， <div> <mat-form-field class="w-100 mt-2" appearance="outline"> <mat-label>Enter a name for your quote</mat-label> <input #quoteName matInput placeholder="Enter a name for your quote" formControlName="quoteName" [maxlength]="40" (input)="onQuoteNameInput($event)" /> <mat-hint align="end">{{quoteName.value.length}} / 40</mat-hint> <mat-error *ngIf="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors?.required">Quote Name is required.</mat-error> </mat-form-field> </div> 在上面的代码中，我使用 Touched 属性来控制错误消息的显示，因此我可以根据需要成功显示或隐藏它们。但是，表单加载后，输入字段的轮廓边框仍然显示为红色。如何防止最初出现红色轮廓？ 除了触摸状态之外，还添加了 mat-form-field-invalid 类检查： <mat-form-field class="w-100 mt-2" appearance="outline" [class.mat-form-field-invalid]="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors"> 或者，您可以在 CSS 中使用 Angular 的内置 ng-valid 和 ng-invalid 类以及触摸状态： .mat-form-field { &.ng-invalid.ng-untouched { // Override the default error styles when untouched .mat-form-field-outline { color: rgba(0,0,0,0.12) !important; // Default outline color } } } 您还可以将表单控件初始化为 null 而不是空字符串，以防止立即验证： this.quoteDetailsFormGroup = this.formBuilder.group({ quoteName: [null, Validators.required] }); 另一种方法是使用 updateOn: 'blur' 推迟验证，直到字段失去焦点： this.quoteDetailsFormGroup = this.formBuilder.group({ quoteName: ['', { validators: Validators.required, updateOn: 'blur' }] }); 最稳健的解决方案是结合方法 1 和 3。这是完整的代码： // Component class export class QuoteComponent implements OnInit { quoteDetailsFormGroup: FormGroup; constructor(private formBuilder: FormBuilder) { this.quoteDetailsFormGroup = this.formBuilder.group({ quoteName: [null, Validators.required] }); } } <div> <mat-form-field class="w-100 mt-2" appearance="outline" [class.mat-form-field-invalid]="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors"> <mat-label>Enter a name for your quote</mat-label> <input #quoteName matInput placeholder="Enter a name for your quote" formControlName="quoteName" [maxlength]="40" (input)="onQuoteNameInput($event)" /> <mat-hint align="end">{{quoteName.value.length}} / 40</mat-hint> <mat-error *ngIf="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors?.required"> Quote Name is required. </mat-error> </mat-form-field> </div> 它将使用 null 初始化表单控件 仅当字段被触摸且有错误时才显示红色轮廓

如何进行材质选择而不溢出容器

我开发了一个包含多个字段的表单：输入或选择。 问题在于，这种形式的容器具有明确定义的高度，当我单击选择时，它会溢出。 我会...

升级到 Angular Material 16 后，Mat-form-field 标签不浮动

我最近将一个项目从 Angular 15 升级到 Angular 16。到目前为止，逻辑工作正常，但是 mat-form-field 面临一些问题，其中标签不浮动。该...

Angular 2 Extended Family 组件通信（无需父级或外部服务）

我需要一个非常易于理解的解决方案来实现大家庭（即叔叔到侄子、侄女到阿姨、自己到表弟）组件/指令之间的通信，而无需共同的父母/祖先...

如何做一个不会溢出他父母的材质选择

我开发了一个包含多个字段的表单：输入或选择。 问题在于，这种形式的容器具有明确定义的高度，当我单击选择时，它会溢出。 我会...