标签: angular-material2

假设我有这个组件:

@Component({
  selector: 'pizza-dialog',
  template: `
  <h1 md-dialog-title>Would you like to order pizza?</h1>

  <md-dialog-actions>
    <button (click)="dialogRef.close('yes')">Yes</button>
    <button md-dialog-close>No</button>
  </md-dialog-actions>
  `
})
export class PizzaDialog {
  constructor(public dialogRef: MdDialogRef<PizzaDialog>) { }
}

我已经将MdDialog导入了我的app模块:

@NgModule({
  imports: [
    BrowserModule,
    MaterialModule.forRoot(),
    MdDialogModule.forRoot(),
  ],
  ...
})

为什么我会收到此错误？

没有MdDialogRef的提供商!

我是材料2的新手我试图将主应用工具栏固定在屏幕顶部,问题是高程不正常(内容隐藏了工具栏的阴影)我这是我的HTML代码

.app-content {
  height: calc(100% - 64px);
  overflow: auto;
}

<md-toolbar class="mat-elevation-z5" color="primary" style="z-index: 100!important;">

  <button md-icon-button (click)="start.open()">
      <md-icon class="demo-toolbar-icon">menu</md-icon>
    </button>
  <span>E-Learning</span>

  <span class="demo-fill-remaining"></span>
</md-toolbar>
<div class="app-content" style="z-index: 0!important;">
  <div class="workspace">
    <el-teacher></el-teacher>
  </div>
</div>

我正在尝试使用角度材料2创建"右侧导航栏" md-sidenav.无论我做什么,它总是在左边.我怎样才能改为右侧呢？

  <md-sidenav #sidenavright mode="side" class="app-sidenav" opened="true">
    <app-question-rightnav></app-question-rightnav>
  </md-sidenav>

您好我是新来的角料,我想创建形式的卡格r列c列的(r X c)动态.例如,如果我有5个用户,那么它应该创建r=3并c=2如下.

user1 user2
user3 user4
user5

我实现了如下:

<md-grid-list cols="2" rowHeight="200px" gutterSize="10px">
  <md-grid-tile  class="divcls" *ngFor="let user1 of users">

     <md-card  fxLayoutWrap="wrap" fxLayout="column" fxFlex="90%" fxLayoutGap="16px">
      <md-card-title>User : {{user1.name}}</md-card-title>
      <md-card-content>{{user1.details}}</md-card-content>
       <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
  </md-card-actions>
      </md-card> 

  </md-grid-tile>
</md-grid-list>

这是正确的方法吗？因为当我尝试调整窗口大小时,它将与卡和网格单元重叠.我在网上查了一下,但没有找到任何干净的方法与纯角材料方式.请指导我以更好的方法实现相同的目标.

import { MdAutocomplete } from '@angular/material';

@Component({
 template:'
             <input type="text" [mdAutocomplete]="auto"/>
             <md-autocomplete #auto="mdAutocomplete" #autoComplete>
             <md-option>
               Some Options
             </md-option>
          </md-autocomplete>'
})

export class AutoComplete {
 @ViewChild('autoComplete') autoComplete: MdAutocomplete;

 closeAuto() {
   this.autoComplete.closePanel();
 }
}

它不是完整的代码,但想法是在方法中调用closePanel.closePanel在https://material.angular.io/components/autocomplete/api上列为方法,但无法正常工作.它说找不到方法.

也试过这种方法

import { MdAutocompleteTrigger } from '@angular/material';

@Component({
 template:'
             <input #autoCompleteInput type="text" [mdAutocomplete]="auto"/>
             <md-autocomplete #auto="mdAutocomplete" #autoComplete>
             <md-option>
               Some Options
             </md-option>
          </md-autocomplete>'
})

export class AutoComplete {
 @ViewChild('autoCompleteInput') autoComplete: MdAutocompleteTrigger;

 closeAuto() {
   this.autoComplete.closePanel();
 }
}

在AngularJS中,可以使用选择器在CSS中设置工具提示的样式 .md-tooltip

在Angular 4中使用自定义格式工具提示的方法是什么？

编辑:

我正在使用Angular 4和Material2.

我如何使用它的一个例子是:

<span mdTooltip='TEST' mdTooltipPosition='right'>TEST</span>

它显示工具提示非常好,除了我不知道如何设计它的事实.

我正在尝试使用材质角度复选框,并将其默认设置为已选中,但它显示为未选中,有什么问题？

<mat-checkbox class = "example-margin" [(ngModel)] = obj.impresora> 
     <label>Printer</label> 
</mat-checkbox>

obj.impresora属性是布尔值

我正在尝试实现Angular Material 2,MatPaginator服务器端分页..我该如何实现？

下面是代码示例:

  <div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: …

我在Angular组件中使用matInput和mat-form-field(@ angular/material),我无法禁用matInput.

这里可以看到一个工作的例子.

我似乎错过了一些明显的东西,但对于我的生活,我无法弄清楚是什么.这是一个错误吗？

如果我[formControlName]从中删除CustomFormInputComponent,那么我可以成功禁用matInput

CustomFormInputComponent:

import { Input, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-custom-form-input',
  template: `
    <mat-form-field [formGroup]="form">
      <input matInput placeholder='Name' [formControlName]="formControlName" [disabled]='disabled'>
    </mat-form-field>
  `,
})
export class CustomFormInputComponent  {
  @Input() form: FormGroup;
  @Input() formControlName: string = 'name';
  @Input() disabled = false;
}

AppComponent:

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app', …

任何人都可以举例说明如何将组件动态加载到Material MatDialog中吗？

我想要做的是:我将为MatDialog配置数据提供一个组件类型,然后该对话框将创建一个实例并放置在它的mat-dialog-content区域内.

看来我需要使用ng-template和viewContainerRef的某种组合,但我不知道如何实例化提供的组件Type并插入到所需的区域.

一个简单的例子:

    <h2 mat-dialog-title>MyTitle</h2>
    <mat-dialog-content>
     <---- dynamically loaded component would be inserted here ---->
    </mat-dialog-content>

    <mat-dialog-actions>
      <button mat-button mat-dialog-close>Cancel</button>
      <button mat-button [mat-dialog-close]="true">Save</button>
    </mat-dialog-actions>