标签: angular-material2

有没有办法检查sidenav元素是否打开？根据API文档，有一个isOpen?参数，但就我而言，它会引发异常：EXCEPTION: Error in ./AppComponent class AppComponent - inline template:2:2 caused by: this.sidenav.isOpen is not a function

import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  template: `
  <md-sidenav #sidenav mode="side" class="app-sidenav">
      Sidenav
  </md-sidenav>
  `,
  styleUrls: ['./sidebar.component.css'],
  host: {
      '(document:click)': 'onClick($event)',
  }
})
export class SidebarComponent implements OnInit {

  constructor(private sidenav: ElementRef) { }

  ngOnInit() {
  }

  onClick() {
     if (this.sidenav.isOpen()) {
         this.sidenav.close();
     }
  }

}

我使用角度为2的材料设计.我想在我的应用程序中使用材质设计分页器,并在组件中获取当前选定的页面索引.paginator插件没有太多文档.这是材料分页器页面:https://material.angular.io/components/paginator/overview

HTML代码

<md-paginator [length]="100"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 25, 100]">
</md-paginator>

角2代码

@Component({
  selector: 'paginator-overview-example',
  templateUrl: 'paginator-overview-example.html',
})
export class PaginatorOverviewExample {
   //I want to get page change event here
}

默认情况下，选择角材料的dropwon将允许页面滚动并相应地重新定位自身。

On the original page of the material-documentation the select-dropdown shows a differetn behaviour: it blocks scrolling when openend:

https://material.angular.io/components/select/overview

How can I achieve this behaviour? I did not find any options or switch to disable scrolling when the select is clicked

EDIT: I did find that there is a thing called "mat-select-scroll-strategy", but it is not documented anywhere. Can anybody give me a hint how to use this?

我正在研究Angular Material的Tabs组件(https://material.angular.io/components/tabs/overview)

默认情况下,在页面加载后选择第一个选项卡.

如何在页面加载时更改为已选择的其他特定选项卡.

我试图在使用matInput datepicker组件的组件控制器中使用momentjs格式化日期，但是当我尝试加载存在这些页面的页面时，在控制台中出现以下错误：

错误：MatDatepicker：未找到DateAdapter的提供程序。您必须在应用程序根目录下导入以下模块之一：MatNativeDateModule，MatMomentDateModule或提供自定义实现。

问题是我尝试在我试图引用该moment()方法的应用程序模块，主要应用程序组件和子组件中包括此内容，但仍然出现错误。我也尝试过使用MatNativeDateModule获得相同的结果。

这是我要导入的模块依赖项：

import { MatMomentDateModule } from '@angular/material-moment-adapter';

Datepicker元素：

<input matInput [matDatepicker]="invoiceDate" [max]="maxDate" name="date" placeholder="DD/MM/YYYY" formControlName="date">

我正在使用具有原色和强调色的棱角材质主题。我有两个不同的主题，分别定义为橙色和绿色，最终用户可以动态更改。theme.scss如下所示

@import '~@angular/material/theming';

@include mat-core();

@mixin widget-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);

    .fa-icon {
      color: mat-color($primary);
    }

    .fa-table-data-row-selected {
        background-color: mat-color($accent) !important;
        color: #152A23
    }

    .fa-text-link {
        color: #2A5D9F;
    }
  }



$custom-primary: mat-palette($mat-blue-grey,500);
$custom-accent:  mat-palette($mat-light-blue, A200);
$custom-warn:    mat-palette($mat-red);
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);

@include angular-material-theme($custom-theme);
@include widget-theme($custom-theme);

//Orange theme
$ora-primary: mat-palette($mat-orange, 800);
$ora-accent:  mat-palette($mat-deep-purple, A100);
$ora-theme: mat-light-theme($ora-primary, $ora-accent);

.orange-theme {
    @include angular-material-theme($ora-theme);
    @include widget-theme($ora-theme);
}

//green theme
$green-primary: mat-palette($mat-green, 800);
$green-accent:  mat-palette($mat-lime, A700);
$green-theme: mat-light-theme($green-primary, $green-accent);

.green-theme {
    @include …

https://stackblitz.com/edit/angular-material2-issue-1vt6en?file=app/app.component.html

请检查选项卡二,它没有正确展开.

如何解决它.

我想在更改mat-select时显示或隐藏表单字段。我用来显示或隐藏该过程的以下代码。但是它显示了一个错误：

无法读取未定义的属性“ valueFieldType”。

1）.html文件

    <mat-form-field style="width: 30%">
                 <mat-select formControlName="evaluationRuleField" placeholder="Select Field" [value]="evaluationRuleField" id="evaluationRuleField" name="evaluationRuleField"> 
                  <mat-option *ngFor="let evaluationRuleField of evaluationRuleFields" [value]="evaluationRuleField">{{ evaluationRuleField.viewValue }}</mat-option>
                </mat-select>             
              </mat-form-field>
<!--Start Dynamically Change Field-->
              <mat-form-field class="example-full-width" style="width: 30%" *ngIf = "evaluationRuleField.valueFieldType == 'text'">
                  <input matInput formControlName="evaluationRuleValue" placeholder="Value" [ngModel]="evaluationRuleValue" id="evaluationRuleValue" name="evaluationRuleValue" required>
              </mat-form-field>
              <mat-form-field class="example-full-width" style="width: 30%" *ngIf = "evaluationRuleField.valueFieldType == 'dropdwon'">
                <mat-select formControlName="evaluationRuleField" placeholder="Select Field" [(value)]="ruleValueFields" id="evaluationRuleField" name="evaluationRuleField" (change)="getValue()"> 
                  <mat-option *ngFor="let ruleValueField of ruleValueFields" [value]="ruleValueField.value">{{ ruleValueField.viewValue }}</mat-option>
                </mat-select>   
              </mat-form-field>
              <mat-form-field class="example-full-width" style="width: 30%" *ngIf = "evaluationRuleField.valueFieldType …

我正在使用Angular Material Stepper组件。

在我的内容中，我有单独的按钮，当当前步骤中的任务完成时，这些按钮可以帮助用户移至下一步。

我想防止用户通过单击步进器组件的步骤按钮来访问下一步。

但是，我希望用户能够通过步进器组件的步进按钮返回上一步。

我不在步进器内使用表格。我已经看到了组件的Linear属性，但是它不符合我的要求。

简而言之，通过单击步进器组件的步骤按钮来防止用户进入“未访问”的步骤。

按下Tab键时如何选择垫选项？它的工作方式应类似于垫自动完成角度6中的Enter键。

<mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

演示版