标签: angular-material2

如何使 mat-dialog 中的按钮也能在 Enter 上工作?

我有一个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 方法,

有人可以提出这个问题吗?

typescript angular-material angular-material2 angular

5
推荐指数
1
解决办法
5863
查看次数

如何在 Angular Material 的自定义主题中设置背景调色板?

我目前定义了一个自定义主题,如下所示:

$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 定义背景键,对我的代码引入最少的更改。提前致谢。

sass angular-material angular-material2 angular

5
推荐指数
1
解决办法
3896
查看次数

嵌套*ngFor*with*ngIf

问题

在下面的代码中,我试图根据它们的类别显示它们的所有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)

我想要实现的目标:

我正在尝试迭代选项卡并将每个选项卡的名称添加到选项卡的"模板".

然后,我试图遍历项目,如果项目的类别与选项卡的类别匹配,那么它将显示在选项卡下.

我

由于某种原因,它似乎不起作用.难道我做错了什么 ?
对不起,我的逻辑,过去两天都醒了!

html angular-ng-if ngfor angular-material2 angular

4
推荐指数
1
解决办法
4302
查看次数

更改角度材料datePicker图标

我想知道是否可以使用角度材料的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)

有没有办法实现这一目标?

datepicker angular-material2 angular

4
推荐指数
3
解决办法
9110
查看次数

禁用mdInput文本字段的float

在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)

angular-material angular-material2 angular

4
推荐指数
3
解决办法
7680
查看次数

背景颜色无法在Angular材质2中的明暗主题之间切换

我有一个使用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)

angular-material2 angular

4
推荐指数
1
解决办法
2872
查看次数

如何更改材料2日期选择器的输出格式

我正在使用角度材料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

datepicker momentjs angular-material2 angular

4
推荐指数
2
解决办法
2万
查看次数

是否可以将angular指令用作html标签?

我目前正在使用角材料树模块,并在演示源代码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)

angular-directive angular-material2 angular

4
推荐指数
1
解决办法
705
查看次数

如何使两个标签在角度材料2中占据整个屏幕宽度

我使用角度材料2并且只有两个标签,并希望它们占据整个屏幕宽度(每个一半,见图2).我怎么能这样做(默认情况下它看起来像pic1)?

pic1
------------------------------------------------
| ITEM1 | ITEM 2 |
------------------------------------------------

pic 2
------------------------------------------------
|         ITEM1        |          ITEM 2       |
------------------------------------------------
Run Code Online (Sandbox Code Playgroud)

html5 css3 angular-material2 angular

4
推荐指数
1
解决办法
927
查看次数

在转换过程中禁用mat-stepper的动画

mat-stepper当我们从一个步骤切换到另一个步骤时,有没有办法禁用Angular材质控件的动画?

animation angular-material2 angular stepper

4
推荐指数
1
解决办法
1880
查看次数