我有一个mat-dialog-box点击事件,它会关闭对话框,但我希望它能够工作Enter也能在按下时工作。有什么办法可以做到吗?
我尝试过使用表格,但没有成功。以下是我尝试使用的解决方案:
超文本标记语言
<form (submit)="doAction()">
<button type="submit">Add</button>
</form>
Run Code Online (Sandbox Code Playgroud)
TS
doAction() {
this.dialogRef.close({ event: this.action, data: this.local_data });
}
Run Code Online (Sandbox Code Playgroud)
但是,Enter尽管单击它正在提交数据,但该事件并未发生。也适用于普通形式(不在对话框中)Enter如果我采用上述 HTML 方法,
有人可以提出这个问题吗?
我目前定义了一个自定义主题,如下所示:
$my-material-theme: mat.define-light-theme((
color: (
primary: $my-material-primary,
accent: $my-material-accent,
warn: $my-material-warn,
),
typography: $my-material-font
));
@include mat.all-component-themes($my-material-theme);
Run Code Online (Sandbox Code Playgroud)
一切正常。尽管如此,经过一些研究,我仍然注意到某些组件使用的背景颜色与我在应用程序上使用的背景颜色不同,尽管以下内容将进一步自定义主题:
$my-material-theme: mat.define-light-theme((
color: (
primary: $my-material-primary,
accent: $my-material-accent,
warn: $my-material-warn,
background: $my-material-background
),
typography: $my-material-font
));
@include mat.all-component-themes($my-material-theme);
Run Code Online (Sandbox Code Playgroud)
,显然我定义了新的背景调色板。经过测试后,我发现它不起作用,因为 mat.define-light-theme 似乎在内部删除了背景键,而是使用内部键。我对 Sass 或材料不太熟悉,我希望能够使用当前版本的 Angular Material 定义背景键,对我的代码引入最少的更改。提前致谢。
在下面的代码中,我试图根据它们的类别显示它们的所有Projects(对象)Tab.
类别必须是等同的.
编辑:如果不清楚,请看这里.
<md-tab-group>
<md-tab *ngFor="let tab of tabs">
<template md-tab-label>
{{tab.name}}
</template>
<h1 *ngFor="let project of projects" *ngIf="tab.category == project.category">
Project Name: {{project.name}}
</h1>
</md-tab>
</md-tab-group>
Run Code Online (Sandbox Code Playgroud)
我正在尝试迭代选项卡并将每个选项卡的名称添加到选项卡的"模板".
然后,我试图遍历项目,如果项目的类别与选项卡的类别匹配,那么它将显示在选项卡下.
由于某种原因,它似乎不起作用.难道我做错了什么 ?
对不起,我的逻辑,过去两天都醒了!
我想知道是否可以使用角度材料的datePicker更改显示的图标.
这是角度材料文档中的代码.
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
Run Code Online (Sandbox Code Playgroud)
有没有办法实现这一目标?
在Angular 4(Material)应用程序中,我有一个用于搜索的文本字段.当我在字段中键入时,会出现第二个字段,显示输入的文本.滚动页面时,这个新字段会浮动.如何禁用浮动行为?
它似乎不是文本字段的默认行为.我试过了md-no-float,但那是我理解的占位符文字.有人建议设置为空value,所以我补充说,但问题仍然存在.
<md-input-container md-no-float style="width: 100%">
<input mdInput formControlName="search" value="" placeholder="Search Terms" />
</md-input-container>
Run Code Online (Sandbox Code Playgroud) 我有一个使用Material 2(当前版本2.0.0-beta.11)的Angular 4应用。
我遵循了主题文档,并创建了两个主题:浅色主题和深色主题。由于我不使用md-sidenav组件,因此将mat-app-background类放在body元素上,该元素应用当前主题的背景色(浅主题为浅灰色,暗主题为深灰色)。
问题在于,当切换主题切换器时(一个简单的按钮可以添加或删除一个类,没有什么花哨的地方,例如此答案),mat-app-background不会更新的背景颜色。
我无法创建成功使用自定义主题的插件,但这是基本要点:
index.html
<body class="mat-app-background">
<app-root></app-root>
</body>
Run Code Online (Sandbox Code Playgroud)
app.component.html
<main [class.dark-theme]="isDarkTheme">
<button md-raised-button color="primary" (click)="toggleTheme()">Toggle</button>
<!-- other content -->
</main>
Run Code Online (Sandbox Code Playgroud)
app.component.ts
isDarkTheme: boolean = false;
toggleTheme() { this.isDarkTheme = !this.isDarkTheme; }
Run Code Online (Sandbox Code Playgroud)
theme.scss
@import '~@angular/material/theming';
@include mat-core();
// light (default) theme
$lt-primary: mat-palette($mat-indigo);
$lt-accent: mat-palette($mat-pink, A200, A100, A400);
$lt-theme: mat-light-theme($lt-primary, $lt-accent);
@include angular-material-theme($lt-theme);
// alternate dark theme
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn); …Run Code Online (Sandbox Code Playgroud) 我正在使用角度材料2 Date-Picker组件
它理解的唯一字符串输入是ISO日期格式
防爆."2017-11-13T10:39:28.300Z"
但我想用语言环境日期值修补我的表单控件
防爆."11/13/2017,下午4:09:46"
因此它输出后面的格式甚至期望这种格式.
我怎样才能做到这一点?有没有办法不使用ISO但自定义格式?
一些想法:
我应该写customDateAdaptor吗?
更新:
https://stackblitz.com/edit/angular-material-moment-adapter-example-bqvm2f
我试图通过扩展nativeDateAdaptor来实现自定义dateAdaptor
我目前正在使用角材料树模块,并在演示源代码https://github.com/angular/material2/blob/tree/src/demo-app/tree/tree-demo.html中进行操作:
mat-tree-node 指令用作自定义html标签:这是什么意思?*matTreeNodeDef="let node":let node表达式究竟是什么?
扁平树
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeTrigger matTreeNodePadding>
{{node.key}} : {{node.value}}
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
<mat-icon matTreeNodeTrigger>
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
{{node.key}} : {{node.value}}
</mat-tree-node>
</mat-tree>
Run Code Online (Sandbox Code Playgroud)
我使用角度材料2并且只有两个标签,并希望它们占据整个屏幕宽度(每个一半,见图2).我怎么能这样做(默认情况下它看起来像pic1)?
pic1
------------------------------------------------
| ITEM1 | ITEM 2 |
------------------------------------------------
pic 2
------------------------------------------------
| ITEM1 | ITEM 2 |
------------------------------------------------
Run Code Online (Sandbox Code Playgroud) mat-stepper当我们从一个步骤切换到另一个步骤时,有没有办法禁用Angular材质控件的动画?