我正在使用 material2 v2.0.0-beta.10 以及 Angular v4，并且在使用md-calendar组件时遇到问题。我的问题是我无法将startAt日期设置为任何内容。
我将开始日期设置为昨天，如下所示：
this.startAt = new Date();
this.startAt = this.startAt.setDate(this.startDate - 1);
这是一个尝试将startAt日期设置为昨天的 Plunkr 。
我错过了什么？
javascript typescript angular-material angular-material2 angular
我正在使用角材料 2 库和md-checkbox元素。
就像是：
<md-checkbox id="myInput"
labelPosition="after"
(change)="toggleOnChange($event)">
Label
</md-checkbox>
稍后在一些其他事件（与此输入无关）我想重置其状态（如果选中，则标记为未选中）。我该怎么做？API支持吗？根据文档，没有这样做的方法。
如果我尝试在元素上切换类，则“视觉上”会取消选中它，但会保留状态。
我正在使用 Material 2.0.0-beta.12 运行 Angular 4.3.4，并且在尝试创建 mat-select 以从异步源生成动态 mat-option 列表时遇到问题。我得到的只是占位符，下拉列表不会扩展。我什至没有收到错误代码。
这是我的代码更新示例：
<form [formGroup]="snoozeForm" novalidate>
<div fxLayout="column">
<mat-form-field>
<mat-select formControlName="snooze_reason">
<mat-option [value]="reason.attributes.snooze_reason_code" *ngFor="let reason of reasons">{{ reason }}</mat-option>
</mat-select>
</mat-form-field>
</form>
如您所见，原因是动态填充的数组。我一定忽略了一些简单的事情，但我确信原因越来越多。
这是我填充数组的地方：
ngOnInit() {
this.generateForm();
this.httpService.getSnoozeReasons()
.subscribe( res => {
this.reasons = res;
}, (error: any) => {
const msg: Message = { title: 'Frontend API Error', textbody1: '' };
if (error.message) {
msg.textbody1 = <any>error.message;
msg.textbody2 = `Task-details component - Snooze reasons`;
} …Angular 4.4.4 Angular Material 2.0.0-beta.12
我正在尝试实现桌面布局，其中屏幕顶部有一个 Angular Material Toolbar，router-outlet下面的内容填充剩余的屏幕高度。我希望router-outlet内容填充屏幕高度，以便我可以将任何子/孙组件的高度设置为 100%，直到我想提供滚动条为止。
我已经回到基础去尝试只div用一个边框来填充工具栏下方剩余的空间，但我什至无法让它工作。看起来好像替换的组件router-outlet是全屏的高度，不考虑其上方的工具栏。
我app.component的如下：
<div id="app-component" style="height: 100%; border: 1px solid red;">
<!-- Application Toolbar -->
<mat-toolbar id="mat-toolbar" color="primary" style="margin: 0; padding: 0;">
<span style="padding-right: 16px;">Indigo</span>
<nav id="tabNavBar" #tabNavBar mat-tab-nav-bar>
<a mat-tab-link *ngFor="let tabNavLink of tabNavLinks"
[routerLink]="[tabNavLink.path]"
routerLinkActive
#rla="routerLinkActive"
[routerLinkActiveOptions]="{exact: true}"
[active]="rla.isActive"
(click)="onClickTab(tabNavLink)"
style="height: 64px;">
{{ tabNavLink.label }}
</a>
</nav>
</mat-toolbar>
<!-- Application Module Content -->
<router-outlet></router-outlet>
</div>
目标组件router-outlet如下：
<div …我有反应形式的这个输入（材料 2）。而且我知道在此输入上放置时间掩码 (hh:mm) 的更好方法。或者我怎样才能为此建立一个指令？
<div class="col-md-2 hours">
<label for="floating-placeholder">Horário</label>
<div>
<input class="col-md-5 end" matInput placeholder="hh:mm" value="" name="end" minlength="4" maxlength="4" formControlName="start">
às
<input class="col-md-5 end" matInput placeholder="hh:mm" value="" name="end" formControlName="end">
</div>
</div>
我想在 Material2 中过滤多个 选择。
为此，我尝试在mat-option类似的东西上使用一个简单的过滤器管道：
transform() { ... return value.filter(v => v.value === argtext); }
问题来了，
首先，我选择一些项目。
然后，我按关键字过滤我过滤了新项目。
现在我可以看到我之前的选择丢失了。
这是因为每次过滤器更改选项时，材料都会构建选项。并且每次也清除选择。所以我使用管道的想法对我不起作用。
感谢阅读/帮助
当我尝试编辑记录时，我无法设置 mat-autocomplete 的值我使用自动完成作为 FormBuilder 对象中的 FormControl 对象并设置从服务器接收的值我使用 Formbuilder.setValue()方法。但是这不会设置自动完成，尽管它向服务器发送请求，因为我正在使用 Observables 的 valueChanges 方法......任何帮助将不胜感激
以下是我正在使用的代码
组件.ts
this.filteredData = this.addDetailsForm.get('product').valueChanges
.debounceTime(400)
.do(value =>
{ let exist = this.myContent.findIndex(t => t.text === value);
if (exist > -1) return;
this._dataService.getSwiftProducts(value).subscribe((res: any[]) => { this.myContent = res; });
}).delay(500).map(() => this.myContent);
组件.html
<div class="row">
<label class="col-lg-4 control-label">Product: </label>
<div class="col-lg-5">
<input type="text" class="form-control" (keyup.enter)="chooseFirstOption()" placeholder="Pick one" aria-label="Number" matInput ="product" formControlName="product" [matAutocomplete]="auto">
<p *ngIf="addDetailsForm.controls.product.errors">This field is required!</p>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"> <mat-option *ngFor="let option of filteredData | async" …试图模拟这个例子https://material.angular.io/components/icon/examples
这是我的组件代码：
import { Component, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material';
import { MatFormFieldControl } from '@angular/material';
import { MatChipInputEvent } from '@angular/material';
import { ENTER, COMMA } from '@angular/cdk/keycodes';
@Component({
selector: 'hello',
template: `
<mat-form-field class="demo-chip-list">
<mat-chip-list #chipList>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (remove)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="New fruit..."
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)" />
</mat-chip-list>
</mat-form-field>
`,
styles: [`h1 { font-family: Lato; }`] …我目前对 Angular 有点陌生，我正试图弄清楚如何制作一个简单的步进器，它可以 (1) -- (2) -- (3)。
我有 html 作为 app.component.html
<mat-horizontal-stepper [linear]="true" #stepper>
<mat-step label="Step 1">
step 1
</mat-step>
<mat-step label="Step 2">
step 2
</mat-step>
</mat-horizontal-stepper>
但是，我需要在打字稿中导入和执行哪些操作才能使其工作？我有 app.component.ts 作为
import { Component, ViewChild } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
@ViewChild('stepper') stepper;
changeStep(index: number) {
this.stepper.selectedIndex = index;
}
}
javascript frontend material-design angular-material2 angular
Material 2 中有没有办法通过事件函数检测复选框是真还是假。传递 $event 仅检测打字稿端的鼠标或键盘，需要检测它是选中还是未选中。
<mat-selection-list #list >
<mat-list-option *ngFor="let aser of fo; let i = index" (click)="onAreaListControlChanged(aser.ID, aser.Name, aser.Number, $event)" checkboxPosition="before" [value]="aser.Number" [selected]="aser.selected" >
<span style="font-size:11px" >{{aser.selected}} {{aser.first}} - {{aser.Number}}</span>
</mat-list-option>
</mat-selection-list>
打字稿
onAreaListControlChanged(sid, sname, snum, $event) { if(checked==true else false}