我想在angular2项目中使用角度材质自动完成组件.我在模板中添加了以下内容.
<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 implements OnInit {
stateCtrl: FormControl;
states = [....some data....];
constructor(private route: ActivatedRoute, private router: Router) {
this.stateCtrl = new FormControl();
this.filteredStates = this.stateCtrl.valueChanges.startWith(null).map(name => this.filterStates(name));
}
ngOnInit(): void {
}
filterStates(val: …我们正在努力在公司建立自己的表格 - 组件.我们试图像这样包装材料设计的组件:
领域:
<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 mat-form-field-infix">
<input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">
<span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>
</div>
</div>
<div class="mat-input-underline mat-form-field-underline">
<span class="mat-input-ripple mat-form-field-ripple"></span>
</div>
<div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>
</div>
</mat-form-field> …在角度材质源中的多个位置,有元素/ css类cdk作为其前缀.
有谁知道cdk角度材料上下文中的缩写？
我正在使用Material 2来添加md-raised-button.
我想仅在某些条件成立时应用此指令.
例如:
<button md-raised-button="true"></button>
另一个例子:我在plunker中创建了一个基本的动态反应形式.我正在使用formArrayName反应形式的指令来控制数组.我想formArrayName仅在特定条件成立时才应用指令.否则不添加formArrayName指令.我尝试和研究了很多,但可以找到任何解决方案.
这是plunker链接:https://plnkr.co/edit/oPZ7PyBSf8jjYa2KVh4J ? p = preview
我真的很感激任何贡献.
提前致谢!
angular-material angular2-forms angular2-directives angular-material2 angular
我有一个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
谢谢
最近,MDL(Material Design Lite)项目的后续版本作为Web的材料组件推出.其目标之一是"与其他JS框架和库无缝集成".
还有另一个项目Angular Material2,专门为Angular(v2 +)提供材料设计组件.
这两个项目都在创建基于材料设计的UI组件.此外,它们具有类似的组件准备/在线开发,以及即将到来的相同组件(在此处和此处列出).
有人可以帮我理解2个项目之间的重叠,我应该选择哪个新项目？
从根本上讲,我确实理解Angular Material2将更加无缝地与Angular项目紧密集成,而Web的Material Components将为多个JS框架提供钩子.但我没有看到重叠的原因,哪一个会有更多的动力(阅读更多的组件).
我想在整个应用程序中使用我公司的品牌颜色.
我发现了这个问题:AngularJS 2 - 材质设计 - 设置调色板,我可以构建一个所谓的自定义主题,但它基本上只是使用预制调色板的不同部分.我不想使用Material2的预定义颜色.我想要我独特的特殊品牌颜色.是否有更好的方式(更好？)来创建我自己的主题,而不仅仅是黑客攻击_palette.scss？
我是否需要为我的品牌调色板制作mixin？如果是的话 - 任何有关如何正确操作的指南？不同色调的含义是什么(标有数字如:50,100,200,A100,A200 ......)？
有关这方面的任何信息将不胜感激!
升级到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'
我需要帮助.我不知道如何更改材料2 datepicker的日期格式.我已阅读文档,但我不明白我实际需要做什么.datepicker默认提供的输出日期格式为fe:6/9/2017
我想要实现的是将格式更改为2017年6月9日或任何其他格式.
文档https://material.angular.io/components/component/datepicker对我没有任何帮助.提前致谢
我有一个关于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
</mat-step>
<mat-step>
Step 3
</mat-step>
<!-- one option -->
<div>
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</div>
</mat-horizontal-stepper>
<!-- second …