Questions tagged «angular-material2»

我正在尝试在Angular 2项目中使用Angular Material Autocomplete组件。我将以下内容添加到模板中。 <md-input-container> <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl"> </md-input-container> <md-autocomplete #auto="mdAutocomplete"> <md-option *ngFor="let state of filteredStates | async" [value]="state"> {{ state }} </md-option> </md-autocomplete> 以下是我的组件。 import {Component, OnInit} from "@angular/core"; import {ActivatedRoute, Router} from "@angular/router"; import {FormControl} from "@angular/forms"; @Component({ templateUrl: './edit_item.component.html', styleUrls: ['./edit_item.component.scss'] }) export class EditItemComponent …

354 angular  typescript  angular-material2  angular-forms 

我们正在尝试在我们的公司构建自己的表单域组件。我们试图像这样包装材料设计的组件： 领域： <mat-form-field> <ng-content></ng-content> <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint> <mat-hint align="end">{{message.value.length}} / 256</mat-hint> <mat-error>This field is required</mat-error> </mat-form-field> 文本框： <field hint="hint"> <input matInput [placeholder]="placeholder" [value]="value" (change)="onChange($event)" (keydown)="onKeydown($event)" (keyup)="onKeyup($event)" (keypress)="onKeypress($event)"> </field> 用法： <textbox value="test" hint="my hint"></textbox> 结果大约是： <textbox placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer"> <field> <mat-form-field class="mat-input-container mat-form-field> <div class="mat-input-wrapper mat-form-field-wrapper"> <div class="mat-input-flex mat-form-field-flex"> <div class="mat-input-infix …

180 angular  angular-material2 

我正在使用Material 2添加md-raised-button。我只想在某些条件为真时才应用此指令。 例如： <button md-raised-button="true"></button> 另一个例子：我在plunker中创建了一个基本的动态反应形式。我正在使用formArrayName反应形式的指令用于控件数组。我只想formArrayName在特定条件为真时应用指令，否则不要添加formArrayName指令。 这是一个矮胖的链接。

109 angular  angular-material  angular2-forms  angular2-directives  angular-material2 

在角形材料源中的多个位置，都有元素/ css类cdk作为其前缀。 有谁知道cdk在角材料上下文中的缩写？

108 angular-material2  angular-cdk 

我有一个mat-select，其中选项是数组中定义的所有对象。我正在尝试将值默认设置为选项之一，但是在页面呈现时仍处于选中状态。 我的打字稿文件包含： public options2 = [ {"id": 1, "name": "a"}, {"id": 2, "name": "b"} ] public selected2 = this.options2[1].id; 我的HTML文件包含： <div> <mat-select [(value)]="selected2"> <mat-option *ngFor="let option of options2" value="{{ option.id }}"> {{ option.name }} </mat-option> </mat-select> </div> 我曾尝试设置selected2与value在mat-option给该对象和它的ID，并使用都不断地尝试[(value)]和[(ngModel)]在mat-select，但没有正常工作。 我正在使用材料版本2.0.0-beta.10

108 angular  typescript  angular-material2 

我已经安装了用于角度的材料 我已在我的应用程序模块MatIconModule上导入（带有import { MatIconModule } from '@angular/material/icon';） 我已经在ngmodule导入下添加了它： @NgModule({ imports: [ //... MatIconModule, //... 我已经导入了所有样式表 而且我也将其导入了我的应用程序组件中，该组件实际上（正在尝试）使用它们（import {MatIconModule} from '@angular/material/icon';在其开头有另一行）。 但是实质图标仍然没有出现。 例如，使用以下行： <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button> 我期待这样的事情： 但是我得到这个： 有任何建议吗？

99 angular  angular-material  angular-material2 

我想在整个应用程序中使用公司的品牌颜色。 我发现了这个问题：AngularJS 2-材质设计-设置调色板，我可以在其中建立一个自定义主题，但它基本上只是使用预先构建的调色板的不同部分。我不想使用Material2的预定义颜色。我想要我独特和特别的品牌色彩。是否有一种比单独修改主题更好的方法（对吗？）_palette.scss？ 我需要为我的品牌调色板做一个混搭吗？如果是这样-有关如何正确执行操作的任何指南？不同颜色的阴影（标有数字：50、100、200，A100，A200 ...）的含义是什么？ 关于这个领域的任何信息将不胜感激！

97 angular  sass  material-design  angular-material2 

我对Angular Material（使用Angular 4+）有疑问。说在组件模板中，我添加了一个<mat-horizontal-stepper>组件，并且在每个步骤中，<mat-step>我都有步进按钮来导航该组件。像这样 <mat-horizontal-stepper> <mat-step> Step 1 <button mat-button matStepperPrevious type="button">Back</button> <button mat-button matStepperNext type="button">Next</button> </mat-step> <mat-step> Step 2 <button mat-button matStepperPrevious type="button">Back</button> <button mat-button matStepperNext type="button">Next</button> </mat-step> <mat-step> Step 3 <button mat-button matStepperPrevious type="button">Back</button> <button mat-button matStepperNext type="button">Next</button> </mat-step> </mat-horizontal-stepper> 现在，我想知道是否可以删除每个步骤中的按钮，并将它们放置<mat-horizontal-stepper>在静态位置或什至外部的其他位置，<mat-horizontal-stepper>并且可以使用组件打字稿文件中的代码来回导航。给一个想法，我希望我的HTML是这样的 <mat-horizontal-stepper> <mat-step> Step 1 </mat-step> <mat-step> Step 2 …

85 angular  angular-material  angular-material2 

我有一个带有排序标题的普通Angular Material 2 DataTable。各种各样的头工作正常。除了以对象为值的对象。这些根本不排序。 例如： <!-- Project Column - This should sort!--> <ng-container matColumnDef="project.name"> <mat-header-cell *matHeaderCellDef mat-sort-header> Project Name </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.project.name}} </mat-cell> </ng-container> 注意 element.project.name 这是displayColumn配置： displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol']; 更改'project.name'为'project'无效或"project['name']" 我想念什么？这有可能吗？ 这是一个Stackblitz： Angular Material2 DataTable排序对象 编辑： 感谢您的所有答案。我已经可以使用动态数据了。因此，我不必为每个新的嵌套属性添加switch语句。 这是我的解决方案：（无需创建扩展MatTableDataSource的新数据源） export class NestedObjectsDataSource extends MatTableDataSource<MyObjectType> …

82 angular  angular-material2 

关闭。此问题不符合堆栈溢出准则。它当前不接受答案。 想改善这个问题吗？更新问题，使其成为Stack Overflow的主题。 1年前关闭。 改善这个问题 最近，MDL（材料设计精简版）项目的后继产品作为Web的Material Components发布。其目标之一是“与其他JS框架和库无缝集成”。 另一个项目Angular Material2提供了专门用于Angular（v2 +）的材料设计组件。 这两个项目都在创建基于材质设计的UI组件。而且，它们具有准备就绪/ in-active-development的相似组件集，以及即将上市的相同组件集（在此处和此处列出）。 有人可以帮我了解两个项目之间的重叠之处，我应该为新项目选择哪一个？ 从根本上讲，我确实知道Angular Material2将与Angular项目更加无缝和紧密地集成，而Web的Material Components将为要使用的多个JS框架提供挂钩。但是我看不到重叠的原因，以及哪一个会有更大的动力（阅读更多内容）。

75 material-design  angular-material2  material-components 

我试图<mat-form-field>在使用Material2的Angular项目中使用，但是碰到了墙。 在下面获取错误消息。 Uncaught Error: Template parse errors: 'mat-form-field' is not a known element: 1. If 'mat-form-field' is an Angular component, then verify that it is part of this module. 2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR …

72 angular  typescript  angular-material2 

升级到Angular 2 Rc.5后出现此错误。这是我的组件模板： <md-input [(ngModel)]="recipient" name="recipient" placeholder="Name" class="col-sm-4" (blur)="addRecipient(recipient)"> </md-input> 我的app.module.ts导入了 FormsModule 我也尝试private recipient;在组件中声明。 我想念什么吗？为什么会出现此错误？ No value accessor for form control with name: 'recipient'

68 angular  typescript  angular-material2