Angular Material项目是Angular中Material Design的实现。它提供了一组基于Material Design系统的可重用,经过良好测试和可访问的UI组件。此标记适用于Angular 6的Angular Material的6.x版本。请勿将此标记用于其他版本或AngularJS Material,即旧版AngularJS框架的Material Design实现。
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} ...
] ] >> 在https://material.angular.io/components/menu/examples处进行了解释,并在下面的StackBlitz中给出了运行示例 要获得汉堡包图标,只需按以下步骤替换触发按钮的图标: <mat-icon>menu</mat-icon>