我正在使用Material 2 diloge,我能够获得关于diloge的数据.
但是我无法找到任何使用@input在diloge上发送数据的解决方案
import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';
@Component({
selector: 'dialog-result-example',
templateUrl: './dialog-result-example.html',
})
export class DialogResultExample {
selectedOption: string;
constructor(public dialog: MdDialog) {}
openDialog() {
let dialogRef = this.dialog.open(DialogResultExampleDialog);
dialogRef.afterClosed().subscribe(result => {
this.selectedOption = result;
});
}
}
@Component({
selector: 'dialog-result-example-dialog',
templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}
所以,这是我的问题.我需要以编程方式取消选择md-button-toggle我内部的任何选定内容md-button-toggle-group.目标是,当md-button-toggle-group隐藏然后重新显示时,它不应该再有任何选择md-button-toggle; 目前,它正在跟踪隐藏之前所选择的内容.不幸的是,我的尝试都没有给出积极的结果.
我特别需要使用这些图形组件,而我无法修改预期的行为.
我尝试了什么:
•将checked属性绑定md-button-toggle到布尔值,并在需要选择/取消选择时将其以编程方式设置为false/true.不行.
•清空md-button-toggle-group selected属性:我通过使用它来访问ViewChild()它,然后设置myViewChild.selected为null.不行.
•直接设置checked按钮的属性,true / false通过ViewChild访问它.也不起作用.
•将ViewChild属性设置value为null.不行.
•与之前相同,但随后致电_updateSelectedButtonToggleFromValue().看起来它会很好,但这是一个私有方法,所以我无法访问它.
这是我的HTML
<md-button-toggle-group #toggleGroup="mdButtonToggleGroup">
<md-button-toggle value="btnBorderColor">
<md-icon [style.color]=toolbarBorderColor.selectedOption.value>border_color</md-icon>
</md-button-toggle>
<md-button-toggle value="btnDelete" [(checked)]="delChecked" (click)="doAction(actionsList.Delete)" #deleteBtn>
<md-icon>delete</md-icon>
</md-button-toggle>
</md-button-toggle-group>
而我的TS
@ViewChild('toggleGroup')
public toggleGroup: MdButtonToggleGroup;
@ViewChild('deleteBtn')
public toggleDelete: MdButtonToggle;
[...]
public doAction(action: ActionsEnum): void {
if (action === …有什么方法可以将md-datepicker配置为在星期一开始一周？默认情况下，它从星期日开始，没有任何规范可以更改此设置。
我想隐藏Angular Material Tabs的标题(按钮),因为我使用自定义导航按钮在标签之间切换. https://material.angular.io/components/tabs/overview
但是,无法使用css隐藏标头.我不知道为什么.md-tab-group是一个角度指令,用标签模板替换.尽管它通常以这种方式大喊大叫...
HTML:
<div class="tabs">
<md-tab-group>
<md-tab label="Tab 1">Content 1</md-tab>
<md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>
</div>
CSS:
.tabs md-tab-header, .tabs .mat-tab-header {
display: none;
}
我正在尝试将CDK数据表转换为Material Design样式的数据表(请参阅:https://material.angular.io/components/table/overview),但是当我将cdk前缀更改为md时,我得到以下错误...
未捕获错误:模板解析错误:无法绑定到'mdHeaderRowDef',因为它不是'md-header-row'的已知属性.1.如果'md-header-row'是一个Angular组件并且它有'mdHeaderRowDef'输入,那么请验证它是否是该模块的一部分.2.如果'md-header-row'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息.3.要允许任何属性将"NO_ERRORS_SCHEMA"添加到此组件的"@NgModule.schemas".
我在网上发现的每个答案都告诉我,我需要导入CdkTableModule,但我已经这样做了&cdk表工作得很好.
import {Component, OnInit, ViewChild} from '@angular/core';
import {DataSource} from '@angular/cdk';
import { CdkTableModule } from '@angular/cdk';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';
我正在导入CdkTableModule,当我使用cdk前缀时,表格按预期显示...
<md-table [dataSource]="dataSource">
<ng-container cdkColumnDef="number">
<md-header-cell *cdkHeaderCellDef> number </md-header-cell>
<md-cell *cdkCellDef="let element"><a routerLink="{{element.number}}"> {{element.number}} </a></md-cell>
</ng-container>
<ng-container cdkColumnDef="book">
<md-header-cell *cdkHeaderCellDef> book </md-header-cell>
<md-cell *cdkCellDef="let element"> {{element.book}} </md-cell>
</ng-container>
<md-header-row *cdkHeaderRowDef="['number', 'book']"></md-header-row>
<md-row …angular-material angular-datatables angular-material2 angular angular-cdk
我正在尝试使用新的API来监听Material2中的滚动事件.我在app.module.ts中导入了ScrollDispatchModule,并使用cdkScrollable指令注释了一个容器,如
<div cdkScrollable>
<div class="my-content">
...
</div>
<footer class="my-footer">
...
</footer>
</div>
我想在ViewChild的组件中访问它并订阅这样的事件,但可滚动变量总是未定义的:
@ViewChild(Scrollable) scrollable: Scrollable;
ngAfterViewInit() {
this.scrollable.elementScrolled().subscribe(scrolled => {
//do stuff
});
}
我是否以正确的方式使用这些API？
我创建了一个新的angular5项目,我正在使用角度材料作为前端组件(https://material.angular.io/).一切都很好,但主要的问题是如何添加自定义主题.我没有在这个项目上使用scss编译器,所以我正在做的是将所有css组件导入到style.css中
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~app/components/test/test.component.css";
问题是我不知道如何修改预建主题的基色或为我的主题生成另一种基色的css.如果有人可以帮助我,我会非常感激!
我试图在Angular Material组件文档中创建一个像这样的材质选项卡组。
我遇到的问题是选项卡的内容未加载/显示。我已经从文档中复制了准确的代码，但是仍然没有运气。
我使用的代码：
<mat-tab-group>
<mat-tab label="One">
<h1>Some tab content</h1>
<p>...</p>
</mat-tab>
<mat-tab label="Two">
<h1>Some more tab content</h1>
<p>...</p>
</mat-tab>
</mat-tab-group>
目前，我有一个包含以下内容的角度组件 x.component.html（使用角度材料）：
<div class="example-container mat-elevation-z8">
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="farbeKey">
<mat-header-cell *matHeaderCellDef> farbeKey </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.farbeKey}} </mat-cell>
</ng-container>
....
此外，我有x.component.ts看起来像这样的组件：
<div class="example-container mat-elevation-z8">
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="farbeKey">
<mat-header-cell *matHeaderCellDef> farbeKey </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.farbeKey}} </mat-cell>
</ng-container>
....
但是问题是，如果尝试在浏览器中访问它，则会收到以下错误消息（这仅是摘录）：
Uncaught Error: Bootstrap's JavaScript requires jQuery
at scripts.bundle.js:8
(anonymous) @ scripts.bundle.js:8
compiler.js:485 Uncaught Error: …我是棱角材料库的新手（通常是材料设计规范），我已经使用引导程序多年了，所以不确定我是否正确实现了mat-grid-list，但是我有以下几点：
<mat-card>
<mat-grid-list cols="2">
<mat-grid-tile>
<mat-grid-tile-header>Clocked In</mat-grid-tile-header>
<mat-list>
<mat-list-item>
<button mat-raised-button color="warn">
{{user.firstName}} {{user.lastName}}
</button>
</mat-list-item>
</mat-list>
</mat-grid-tile>
<mat-grid-tile>
<mat-grid-tile-header>Clocked Out</mat-grid-tile-header>
<mat-list>
<mat-list-item>
<button mat-raised-button color="accent">
{{user.firstName}} {{user.lastName}}
</button>
</mat-list-item>
</mat-list>
</mat-grid-tile>
</mat-grid-list>
这基于有角度的材料示例，我在其中包括了一个有效的stackblitz示例：https ://stackblitz.com/edit/angular-cccnjp ? file = app%2Fsidenav-sensitive-example.html
如您所见，按钮已呈现在mat-grid-tile-header内部，并且mat-card尚未扩展以容纳所提供的内容（正如我所期望的那样）
编辑：所以，我确实尝试在mat-grid-list上使用rowHeight =“ fit”属性，但这不会呈现任何内容，我希望这会根据内容来扩大mat-grid-list的高度，但是这是行不通的。
https://stackblitz.com/edit/angular-cccnjp-ylmzf9?file=app/sidenav-sensitive-example.html
更新： 丑陋的工作解决方案
所以我设法用一些（非常丑陋的）CSS实现了这一点...
<mat-card class="height100p">
<mat-grid-list cols="2">
<mat-grid-tile class="mat-grid-tile-custom">
<mat-grid-tile-header>Clocked In</mat-grid-tile-header>
<mat-list class="custom-mat-list">
<mat-list-item>
<button mat-raised-button color="warn">
{{user.firstName}} {{user.lastName}}
</button>
</mat-list-item>
</mat-list>
</mat-grid-tile>
<mat-grid-tile class="mat-grid-tile-custom">
<mat-grid-tile-header>Clocked Out</mat-grid-tile-header>
<mat-list class="custom-mat-list">
<mat-list-item>
<button mat-raised-button color="accent">
{{user.firstName}} {{user.lastName}} …