如果我参考有关的材料设计指南，它们定义： 初级的 主要变异体 次要的 次级变异体 背景 表面 错误 角材质定义 初级的 次要的 警告 此外，angular中的对比度颜色相当于MDC中的On* 1> 在“角度材质”中，背景和曲面根据主题生成器功能设置为白色或黑色。没有自定义的访问权限 [编辑]（谢谢@G.Tranter）： 自定义背景色 2> 在“角度材质”中，我可以定义3种颜色中每种颜色的浅色和深色变体，但我无法控制这些变体的使用位置！ （除非我手动覆盖每个mat-*类…） 我可以用两种颜色（原

我有一个表，我想有墨水和表中的特定行涟漪效果。当我将属性md ink ripple添加到table的tr元素时，它显示了整个表的涟漪。请告诉我如何解决此问题。您可以添加显示：块；位置：相对位置到行样式-但这可能会导致奇怪的行为。我认为这是行不通的，因为它向tr元素添加了一个绝对定位的div和classmd ripple container，该元素无论如何都是无效的html。IMO最接近的方法是将md ink ripple应用于td元素，如中所示。

我希望我的角度材料自动完成是一个建议列表，但不是要求。但是，我不知道如何实现，因为他们的角度材料文档中没有明确的示例 在下面的示例中，我的模型是$ctrl.item.category 很明显，下面的示例是错误的，因为我的模型链接到了md selected item，但这仅在我选择一个项目时有效。我希望用户能够自由输入文本，如果该项目不在列表中。基本上，autocomplete已经在大多数浏览器中工作了 我看到很多关于如何禁用此功能的问题，但他们并没有尝试禁用，而是在未选中某个项目时清除剩余的文本

如何创建“搜索输入”或“添加按钮”作为角材质选项卡组件的最后一个选项卡 我看不出有迹象表明这是可以做到的。有人能确认这是否可行吗？解决办法也将受到赞赏 屏幕截图显示了我想要的示例：“搜索输入”作为最后一个选项卡项： 截图是从一个随机的（即任何）YouTube频道上截取的 谢谢 虽然我不认为在不编辑组件的情况下可以在mat选项卡内设置输入框，但您可以在mat选项卡组后设置一个用于搜索的输入框，并将其与mat选项卡组放在同一行中，例如，在CSS中使用flex 例如： HTML: 将产生以下结果：

只有当鼠标离开“选择”下拉列表时，才可能触发选择更改吗？使用下面的示例，当我在一个选项上使用“多个”和用户检查时，我会在每次选择后立即获得更改事件 <mat-form-field> <mat-select placeholder="Toppings" (change)=onChange($event) multiple> <mat-option *ngFor="let topping of toppingList" [value]="toppin

我是AngularDart的新手，正在尝试在我的项目中添加一个下拉选择器。我正在看AngularDart图库中的示例，特别是： 我回到了“基础”，使用IntelliJ IDEA>new project>Dart>AngularDart Web应用程序创建了一个新项目。“我的第一个AngularDart应用程序”（待办事项列表应用程序）构建并运行正常 因此，为了添加下拉选择器，在尝试了各种方法之后，我将AngularDart Gallery中的演示代码添加到此项目中： 在上面的URL上，单击Ma

切换侧导航时，我等待响应，然后调用gridster.resize（）： 这是一份完整的报告 确保应用程序窗口足够宽，以便gridster显示桌面布局——或者最好在一个窗口中打开应用程序 这里有一个例子： 当我启动应用程序时，我的gridster项目磁贴的宽度约为223，并按预期显示 当我现在切换侧导航时，gridster项的大小正确调整： 当我使用开发工具时，我可以看到瓷砖的新宽度是252 gridster resize回调的控制台日志也显示宽度为252 但是组件中的宽度是错误的：仍然是223

我是角材料设计新手，我想用页眉和页脚显示日期选择器 下面是我的ts代码 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy } from '@angular/core'; import {MatCalendar} from '@angular/material/datepicker'; import {DateAdapter, MAT_DATE_FORMATS, M

我在表单上有单选按钮，当用户做出选择时，它 应根据用户选择触发下一组单选按钮 比如说 有3个选项1、2和3 如果用户选择1，则应显示相应的收音机

如果以前有人问过这个问题，我很抱歉，但我有一个非常愚蠢的问题，我找不到答案 使用“角度材质”（angular material）的属性，标签始终渲染为大写。我尝试使用div将文本包装在里面，但没有成功 有人有什么建议吗？他们为什么选择这种行为？（而且似乎没有人感到不安） 我有种感觉，我在做一件不可思议的蠢事！：） 谢谢使用其他人设计和构建的组件的陷阱在于他们可以做出美学决策 如果您想知道是什么导致了某些行为，最好的第一步是查看源代码并检查元素 查看.md选项卡，.md选项卡上的文本转换样式属性设

如何使一个div真正占用一定百分比的父空间？请参见下面的代码： <div layout="column"> <div id="div1" flex="70%"></div> <div id="div2" flex="30%"></div> </div> 我想使div1的高度为父div的70%，div2的高度为父div的30%。但这不起作用。1区和2区坍塌。但是，如果父布局是row，它就可以正常工作——div1在

我正在使用Matsnakbar进行angular 5项目，我似乎无法更改“action”按钮的颜色 我已将快餐店注入我的HttpInterceptor： this.snackBar.open('Invalid Login', 'Ok', { duration: 2000, panelClass: ['my-snack-bar'] }); 我的css： .my-snac

我使用带角材质的angular 7，我想移除空间底部，如你所见。我尝试了很多方法，但都没有成功。您可以将此添加到css中 ::ng-deep .mat-form-field-wrapper{ margin-bottom: -1.25em; } 注意：删除空格时，无法正确放置hint或error。 错误和提示进入表单字段 不使用：ng deep（用于角度8） 关闭更改填充的组件的封装 你可以这样做 从'@angular/core'导入{Component，ViewEncapsulation

我在引导模式中使用了“材质”选项卡组。我始终希望第二个选项卡处于活动状态。如果我将[selectedIndex]='1'，我会在第一次打开模式时激活第二个选项卡。但在第一次打开后，如果我选择第三个选项卡并关闭模式并重新打开模式，我会激活第三个选项卡，而不是第二个选项卡 如何在打开模式时始终激活第二个选项卡 启动演示模式 情态标题 &时代； 内容1 内容2 内容3 接近 我认为这是一个bug，但您可以使用双向数据绑定，它可以正常工作 <md-tab-group [(selectedInd

我有一个新的角度项目，我已经添加了角度材料。这些组件与默认的视图封装方法配合得很好。但是它们在封装中看起来都很糟糕：viewenclosuration.ShadowDom。有没有办法让它们与阴影dom一起工作？最后，我希望使用角度元素将我的组件集成到另一个应用程序中，如果可能的话，我不希望我的样式和宿主应用程序的样式之间存在任何冲突

NVDA未读取mat select的折叠/展开状态，也未读取预选值使用aria展开属性读取折叠/展开状态。当下拉面板打开时，可以将该值更新为true <mat-select (openedChange)="isExpanded = $event" [attr.aria-expanded]="isExpanded"> 你能用小提琴演示一下你的行为来改进你的问题吗。angular material网站上的标准示例起作用，因此这可能是您的实现中的一

我在我的应用程序中使用了mat snack bar，它工作得很好，实际配置是： constructor（私有snackbar:matsnakbar）{} showNotification（消息：字符串，按钮文本：字符串，消息类型：“错误”|“成功”， 持续时间？：数字）{ 此.snackbar.openFromComponent（NotifierComponent{ 数据：{ 讯息:讯息,， buttonText:buttonText， 类型：messageType， 图标：“关闭” }, 持续

我正在尝试使用角度材质库。 我在package.json中添加了@angular/material的依赖项，如下所示 "@angular/animations": "^5.0.0", "@angular/cdk": "^6.0.0", "@angular/material": "^5.2.5", 当我使用 import { MatTabChangeEvent } from '@angular/material'; 它在编译时抛出错误 ERROR in [at-loader] ./node_m

我是角材料设计的新手，我对动态输入的mat autocomplete有一个问题。默认情况下，用户可以看到一个输入，但当选择某个值时，可以添加另一个输入，这是一个棘手的部分-如何使所有这些输入只使用一个mat自动完成？可能吗 下面是我使用mat autocomplete的代码。addItem（）函数正在添加另一个将绑定到同一mat autocomplete的输入。应该把它移到上面吗？那么唯一id呢？如果将多个输入连接到同一个mat autocomplete，如何解决此问题 <div form

我正在尝试将id属性添加到“角度材质材质”选项卡，以查找e2e测试中的元素？我不能把它列出来吗？ 有人能帮我怎么做吗 <mat-tab label="custom" class="scroll-x" id="custom"> 感谢在本文中，mat选项卡ID由组件包装，事实上您无法使用自定义ID 如果要查找HTMLElement，可以使用mat-tab-label-2-0作为标签或mat-tab-content-0-0作为内容 <div class="mat-tab-lab

我有以下HTML代码： <mat-form-field > <mat-label>Favorite food</mat-label> <mat-select> <mat-option role="option" *ngFor="let food of foods" [value]="food.value"> {{food.viewValue}} </mat-option> </mat-select>

我在渲染mat日期选择器时面临问题。但是，当我重新加载页面时，它工作正常。只有当我从一个选项卡导航到另一个选项卡时，才会发生这种情况 <mat-form-field class="example-full-width"> <input matInput [matDatepicker]="picker" id="date" required [(ngModel)]="d.date" name="date">

如何更改RTL语言的角度材质进度条的方向 有一个css translate函数需要破解，但我不知道如何实现。您可以使用以下代码通过css手动重写它： ::ng-deep .mat-progress-bar[dir='rtl'], :host-context([dir='rtl']) ::ng-deep .mat-progress-bar { transform: none; } 一旦我找到一个更好的方法，我将通知您作为更新，在材料7.3.6中使用“dir”属性，这似乎“刚好有效” <

我想在输入下显示一个气泡内的验证错误，只要用户聚焦元素，该气泡就可见。 显然，这不是一项容易的任务，我放弃了我第一次尝试只使用CSS来完成这项任务（不能使它过于特定的元素，如果元素位于页面的末尾怎么办等等） 所以我回到angular页面，找到了matTooltip，它的行为完全符合我的要求。（在其他元素的顶部，当在页面末尾时改变位置等）：）但是我一直在思考如何最好地结合这两个元素 matError与matFormField紧密耦合，matTooltip或多或少是独立的 有人试过这个或类似的东西吗

我正在使用角度材质进行角度应用。我注意到两者之间有细微的差别。特别是在输入端。那是故意的吗？我可以通过一些配置得到相同的吗？这里有一个例子来说明我的意思 vs 填充和边距是不同的 MD具有AM没有的边界半径 我知道这看起来不多，但我真的很想让它看起来一样 您所看到的只是文档中描述的各种内容。据我所知，材料设计只是一种规格，而角材料则是它的一种实现。左边的字段有填充外观，右边的字段有标准或遗留外观，很难说。您看到的只是文档中描述的各种不同。据我所知，材料设计只是一种规格，而角材料则是它的一种实

在我的角度项目中，我有一个在mat nav列表中包含一些路由的。 在小屏幕上，sidenav具有背景的“结束”模式，但有时当我单击路由元素时，我会看到sidenav没有关闭，并失去背景，正如您在视频中看到的那样。 此sidenav由材料sidenav示意图生成，代码如下： <mat-sidenav-container> <mat-sidenav #drawer [attr.role]="(isHandset$ | async) ? 'dialog' : 'navi

我需要显示一些字段的帮助信息，如图所示 我想最适合这个。然而，提示图标没有调整它，它在第二行失败 到目前为止，我得到了以下解决方案 名称 我们需要知道怎么给你打电话 当您将直接放在中时，它似乎也能正常工作？ <div ng-controller="DemoCtrl" layout="column" layout-padding="" ng-cloak="" class="" ng-app="MyApp"> <md-content> <div layo

我有一个名为purchase_id的字段，它对于多个记录都是相同的。许多记录具有相同的采购id。目前，我正在为多个记录显示相同的采购id，但现在我希望将具有相同采购id的单元格合并，并为相同的记录仅显示一次采购id 提前谢谢 我的代码 序列号 {{element.serial_no} 全部的 购买编号 {{element.purchase_id} 品名 {{element.product_name} 量 {{element.quantity} {{totalquant}} 买价 {{eleme

我有一个angular cli组件，其中包含多个mat扩展面板（） 我需要从ts文件打开/关闭扩展面板，我不确定如何访问各个扩展面板上的属性。我发现了错误 ERROR TypeError: Cannot read property 'open' of undefined 我正在尝试访问此元素 <mat-expansion-panel #first="matExpansionPanel"> 这是我的ts import { Component, OnInit } from '@ang

我想在AngularJS应用程序中使用angular材质，因此我下载了它及其所有依赖项： <script src="bower_components/hammer/hammer.js"></script> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-aria/angular-aria.

我在用AngularJS材料解决问题时遇到了一些麻烦，我想知道是否有人知道为什么会出现这段愚蠢的代码： <md-tabs layout-fill > <md-tab id="tab1"> <md-tab-label>Item One</md-tab-label> <md-tab-body> <md-list> <md-s

如果我的数据更多，我喜欢使用可滚动的扩展面板内容。 那么如何固定扩展面板内容的高度。我的代码是 如下 <mat-accordion> <mat-expansion-panel *ngFor="let analytic of analytics" (opened)="panelOpen(analytic.group_title_uri)"> <mat-expansion-panel-header> {{analytic.group_tit

我正在使用Angular6和angular-cli-6.0.8。 在使用matTooltip时，然后在鼠标悬停时，我会得到组件（标题）的位置变化，并将其移出鼠标，这是正常的行为。 代码如下： <div #HeaderMenu> <div id="headerMenu" *ngIf="isHeaderButtonOpenStatus" style="display:block"> <div class="right-h" *ngFor="let

我正在我的项目中使用基本的mat select组件 <mat-form-field> <mat-select placeholder="Favorite food"> <mat-option *ngFor="let food of foods" [value]="food.value"> {{food.viewValue}} </mat-option> </mat-sele

我有一个工具栏和一个按钮在它的结尾。 当我试图得到按钮的位置时，它给出了错误的左/右值。 在下面的示例中，两个按钮返回相同的位置，尽管一个位于屏幕的开头，另一个位于屏幕的结尾 Html: 您总是调用相同的函数。你永远无法得到正确的值。您必须将单函数调用从clickButtonOut（）更改为clickButtonRow（） 您的代码： <mat-toolbar color="primary"> <mat-toolbar-row> <span> to

在实现日期选择器时，mat calendar始终选择touchUi，它显示在mat日期选择器弹出div的外部 添加[touchUi]=“true”将使用touchUi创建更大的mat datepicker弹出窗口，但其大小仍然不正确（mat datepicker弹出窗口div中的滚动条） 在新应用程序和Stackblitz上的效果与预期一样，所以我不确定在哪里进行故障排除 <mat-form-field> <input formControlNam

目标：触发驻留在模块中的组件，以便激活该组件的ctor中的我的订阅。 我使用PreloAllModules作为预加载策略。但这并没有发生 我需要在FriendsComponent的de构造函数中订阅一些事件。 设置如下所示： { path: 'social', component: SocialModule, children: [ { path: 'friends', component: FriendsCompone

我们正在为我们的应用程序使用角度材质表： 您可以演示如何在鼠标悬停时突出显示一行吗？使用：hover选择器向行元素添加一些CSS： .mat-row:hover { background-color: red; } 您可以在主题文件中设置组件的样式： @mixin newName-theme($dark-theme) mat-table tbody tr:hover{ cursor: pointer; background: #b4b4b433; }

我使用的是角度拖放CDK： 我能够将物品从一个容器拖放到另一个容器，反之亦然。现在，我试图不从容器中删除掉的项目，但它应该掉到另一个容器中 正如您在图片中看到的，我想将一个项目从'to do'容器拖动到'Done'容器中 我想在掉落后保留一件物品 示例： 任何帮助，请…我认为使用棱角材料是不可能的。这里有一个可能的解决方案 <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}} <span (cl

在subscribe中设置mat pagintor时，我仍然没有定义。我在设置数据后设置了它。如果您有一个*ngIf（和我一样），请确保您的在*ngIf之外。一旦你把它放在外面，并在订阅中设置分页/排序，你就应该很好了

问同样的问题，因为从来没有一个决议。是否可以在动态表上显示嵌套值

我有一个自动完成的md芯片，但是自动完成中的文本超出了宽度，显示如下： 因此，建议框使用100%的宽度或根据单词大小进行调整 <md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.name" placeholder="Searc

如果未在模型中为字段设置默认值，则占位符和标签将重叠。在Angular formly中使用自定义模板时会出现此问题。这就是CSS问题。我试着在场地上设置垫子，但仍然没有帮助 对于物料界面，您需要从@ngx formly/material导入字段类型， 下一个缺少的部分是导入MatInputModule 下面是一个工作示例：对于材质UI，您需要从@ngx formly/material导入字段类型， 下一个缺少的部分是导入MatInputModule 下面是一个工作示例：

我有一些mat选择和自动完成，它们都接受一个对象并显示一个值，但当我将表单发布到服务器时，它会发送一个不同的值。我试图用普通的mat输入实现同样的功能，但是我没有看到设置值和以不同方式显示文本的方法。我目前有如下输入： <mat-form-field appearance="outline"> <mat-label>Name</mat-label> <input matInput type="text" formControlName="name">

我想有一个md选择，用户可以清除所选的值。例如，他们选择了一个值，但决定清除所选内容 md select的行为是选择选项中的第一个条目。我想让它回到没有选择的状态 我想我可能需要一个定制的指令来实现这个，所以我实现了一个简单的指令，它监听DELETE键的keydown HTML: 这是我的密码笔： 但它不起作用-当按下DELETE键时，第一个选项值被选中。我建议在状态列表之外使用空选项： <md-select ng-model="ctrl.userState" select-cle

我在我的应用程序中使用md芯片，但我无法根据特定条件定制芯片。假设我有两个芯片，其中一个是只读的，另一个是可移动的。但当我尝试只读时，它使两个芯片都成为只读。有什么建议吗？对于ng材质中的单个实例，这显然是不可能的。然而，根据您试图完成的任务，有一种变通方法可以让您在不同的位置以不同的条件显示同一组芯片 您可以使用相同的ng型号在页面上设置两个不同的实例，以便它们彼此匹配 一个md芯片可以将readonly设置为true，另一个可以设置为可写和可移动。如果您试图在一个位置显示“选定芯片”或“当前

角度材质2有一个对话框组件。基本上显示一个弹出模式。我有另一个div元素（不在对话框中），我想把它放在对话框上 是否可以通过调整z索引来实现？如果可能的话，怎么做 我通过改变z-指数算出了。请放弃如果需要，您可以删除该问题。

我在使用WebStorm JetBrains IDE和@angular/materialv5.0.0库时遇到问题。尝试使用mat table组件时，我有模板错误： 我曾尝试禁用Angular语言服务，但这没有任何意义。有什么建议吗？这里有两个问题： 使用星号符号时，材料表结构指令报告为未知（如*matRowDef）： 将隐式上下文传递给模板输入变量会导致语法错误： 所以我应该等到JetBrains解决这个问题？也许我可以以某种方式关闭这些错误？您可以通过添加*matRowDef等来消除第一个错

在这里，我使用角材料来设计应用程序。我已经创建了嵌套菜单栏。现在，我正在尝试从菜单栏路由每个子菜单选项。为此，我使用routerlink指令中的routerlink和routerActivateLink模块。 但布线不符合要求 这是我的路由代码 <mat-menu #adminmenu="matMenu" [overlapTrigger]="false"> <button mat-menu-item><span>Account Maintenanc

当然是奇怪的情况所选状态。长度显示为1，但mat select仍处于禁用状态。我做错了什么？您没有指定禁用的属性绑定到表达式。您的代码正在将属性值设置为字符串selectedInstances.length===0，当作为布尔值计算时，该字符串是真实的。请尝试[disabled]=“selectedInstances.length==0”或disabled=“{{{selectedInstances.length==0}}”您尚未指定禁用的属性绑定到表达式。您的代码正在将属性值设置为字符串sel