Angular Material项目是Angular中Material Design的实现。它提供了一组基于Material Design系统的可重用，经过良好测试和可访问的UI组件。此标记适用于Angular 6的Angular Material的6.x版本。请勿将此标记用于其他版本或AngularJS Material，即旧版AngularJS框架的Material Design实现。
在 Angular 2 版本 6 中更新 MatTableDataSource 的正确方法
我有一个使用 mat-table 组件的列表，该组件由 MatTableDataSource 提供。 在组件.html 中 在组件中... 我有一个使用 mat-table 组件的列表，该组件由 MatTableDataSource 提供。 在component.html中 <table mat-table [dataSource]="dataSource" matSort> 在组件.ts中 dataSource = new MatTableDataSource(); 当我单击删除项目时，在服务器成功回调时，我通过重新实例化 MatTableDataSource(this.resources) 来更新列表以反映新结果集，并像这样传入新结果集。这确实有效... this.PHService.getResources().subscribe(resources => { this.resources = resources; this.dataSource = new MatTableDataSource(this.resources); this.dataSource.sort = this.sort; }); 然而，尽管这有效，但我觉得这是错误的。 我读过一些文章说我必须扩展数据源？并调用 renderRows() 方法？我已经尝试过这个，但似乎无法让它在我的场景中工作。 我知道这是我缺乏理解。 我找到了一种更好的方法，可以省去使用 @ViewChild 属性装饰器注入 ChangeDetectorRefs 服务的麻烦。 以下是代码示例： @ViewChild(MatTable) table: MatTable<any>; 然后只需调用该属性装饰器上的 renderRows() 方法，如下所示： refresh(): void{ this.service.method().subscribe(resources => { this.dataSource.data = resources; this.dataSource.sort = this.sort; this.dataSource.paginator = this.paginator; }); this.table.renderRows(); } 这是我想出的最好的解决方案，到目前为止对我来说有效。 使用角度材质 6.4.7. 希望这有帮助。 在组件初始化时创建新的 MatTableDataSource 对象，然后添加传入 dataSource.data 的数组 dataSource.data 是应由表呈现的数据数组，其中每个对象代表一行，因此您不必在每次更改时创建新的对象实例。 可以使用ChangeDetectorRef。它正在寻找给定组件中的更改。 constructor(private changeDetectorRefs: ChangeDetectorRef) {} refresh(){ this.PHService.getResources().subscribe(resources => { this.dataSource.data = resources; this.dataSource.sort = this.sort; }); this.changeDetectorRefs.detectChanges(); } this.dataSource.data = []; this.dataSource = new MatTableDataSource(this.commonTableData);
Angular 6 Mat-Dialog 隐藏了部分后台网页
所以，我一直在使用Mat-Dialog来显示弹出窗口和对话框，我刚刚发现了这个问题。当我向下滚动时，背景页面的一部分（我打开模式的页面）会被隐藏......
为什么使用自定义全局验证器时，mat-error 不会显示在 Angular Material 6 中的 mat-form 字段内
我正在使用角材料6，我在mat-form-field内有一个验证，当在mat-form-field之后移动到正确显示的mat-error时，不显示mat-error。 无效代码：...
我有一个通用组件，如下所示，我在其中使用 mat-error @成分（{ 选择器：'falcon-validation-error'， 独立：真实， 导入：[CommonModule，MatInputModule，]， 模板：` ...
每当用户单击不在其中的某个位置时，我都会尝试关闭我的侧边栏。我已经尝试过双向数据绑定，现在我正在尝试使用 rxjs 的主题 应用程序模板 每当用户单击不在其中的某个位置时，我都会尝试关闭我的侧边栏。我已经尝试过双向数据绑定，现在我正在尝试使用 rxjs' Subject 应用程序模板 <app-sidenav [openedSubject]="openedSubject"></app-sidenav> 应用程序组件 openedSubject = new Subject<boolean>(); @HostListener('click', ['$event']) clickedInside($event) { this.openedSubject.next(false); } SidenavComponent @Input() openedSubject: Subject<boolean>; @ViewChild('sidenav') sidenav: MatSidenav; ngAfterContentInit() { this.openedSubject.subscribe(opened => { if(this.sidenav.opened) opened || this.sidenav.toggle(); }); } toggle() { this.openedSubject.next(!this.sidenav.opened); } Sidenav模板 <mat-sidenav-container> <mat-sidenav #sidenav><mat-toolbar color="primary">Menu</mat-toolbar> </mat-sidenav> <mat-sidenav-content> <mat-toolbar color="primary"> <button (click)="toggle()">toggle</button> </mat-toolbar> </mat-sidenav-content> </mat-sidenav-container> https://stackblitz.com/edit/ng-sidenav-experiments 但是好像有逻辑错误。 click 事件 覆盖整个文档，但它应该排除侧边导航和工具栏。 成功了。问题是我对 HostListener 的使用，而我真的只想像这样 (click) ： <sidenav [openedSubject]="openedSubject"></sidenav> <fake-route-view (click)="dismissSidebar()"></fake-route-view> 完整工作版本：https://stackblitz.com/edit/ng-sidenav-experiments
我想在日期选择器上突出显示周末（周六和周日）。 我尝试重新调整使用布尔值表示日期位置 0（星期日）和位置 6（星期六）的lockedweekendfilter...
从 Angular 6 mat-selection-list 获取所选值的列表
如何获取从组件中的 Angular 材质垫选择列表中选择的所有值的列表。给出的示例显示了要在模板中显示但不在组件中显示的值。我正在尝试...
我正在尝试使用多个复选框自定义垫选择。 由于某种原因，面板的最小宽度错误，如下所示： 我不知道它在哪里计算这个最小宽度。 我也尝试添加
matTextareaAutosize 在 Angular Material 6.4.2 中不起作用
我正在尝试在 Angular Material 6.4.2 中的文本区域上应用自动调整大小，如下所示 - <question vote="4"> <p>我正在尝试在 Angular Material 6.4.2 中的文本区域上应用自动调整大小，如下所示 -</p> <pre><code><mat-form-field> <textarea matInput [matTextareaAutosize]="true" placeholder="Task description" formControlName="description" [errorStateMatcher]="ErrorMatcher"> </textarea> </mat-form-field> </code></pre> <p>但它抛出以下错误：无法绑定到“matTextareaAutosize”，因为它不是“textarea”的已知属性</p> <p>我的代码有什么问题？</p> </question> <answer tick="false" vote="2"> <p>在你里面<pre><code>app.moudle</code></pre></p> <pre><code>import { MatInputModule } from '@angular/material'; </code></pre> <p>然后将 <pre><code>MatInputModule</code></pre> 添加到您的 <pre><code>app.moudle</code></pre> 导入中 </p> </answer> <answer tick="false" vote="0"> <p>在 Angular v14 中，此属性已更改为 <pre><code>cdkTextareaAutosize</code></pre>。导入更改为</p> <pre><code>import {MatInputModule} from '@angular/material/input'; </code></pre> </answer> </body></html>
场景： 我使用的是角度材料选项卡，每个不同的选项卡都有各自的动态组件。 因此，当我切换选项卡时，它会从 DOM 中删除内容。当我再次回来时...
作为一个刚接触Angular的新手，我有一个疑问，在Angular 4中，我们有一个来自MdIconModule的md-icon标签，在后来的Angular版本中，这个标签被改成了MatIconModule。
[嗨，我有一个带有扩展折叠选项的Mat表。我已完全使用以下链接作为参考。 https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting现在...
我有mat-grid-list，用于在视图中列出项目。问题1：每个项目都有一个Mat-grid-Tile-footer部分，其中显示了一个有角度的材质按钮。该按钮当前位于左侧...
我正在从组件中打开一个对话框。 const dialogRef = this.dialog.open（DialogOverviewExampleDialog，{width：'500px'，data：DialogData}）; dialogRef ....
如何在展开时设置Angular材质的mat-expansion-panel-header的高度？
我想设置能够扩展的mat-expansion-panel-header的高度[例如32px]。但是，在扩展面板时，高度将变为材质的默认高度[我猜是64px]，然后将其设置为...
在我的angular 6应用程序中，我有一个材质表，其中有一个复选框列。单击复选框后，我需要捕获所属的表行，以便可以更新基础数据库...
Angular Material：Tree node count
[Angular Material]树实现有几个示例。我没有找到一个示例，该示例如何自动为每个级别添加一个计数器。例如1杂货1杏仁粉2 ...
由于某些原因（阅读：无法创建许多组件），我必须在我的应用程序上创建可以用作放置元素的部分。 （不能使用* ngIf）我创建了DropListRef--Constructor（...
[从JAVA后端API，我得到此响应。 [[{{cardType“：null，” cardDescText“：” DISC“，” dueToday“：” 1“，” dueTomorrow“：” 0“，...
我正在尝试使用卡来过滤数据，但是我没有设法使用卡来过滤数据，而不是数据表示例：从'@ angular / core'导入{Component，OnInit};导入{MatTableDataSource} ...