标签: angular-material2

我有一个带有排序标题的普通Angular Material 2 DataTable.所有排序都是标题工作正常.除了具有对象作为值的那个.这些根本不排序.

例如:

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

请注意 element.project.name

这是displayColumn配置:

 displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol'];

更改'project.name'到'project'不工作,也不"project['name']"

我错过了什么？这甚至可能吗？

这是Stackblitz: Angular Material2 DataTable排序对象

编辑: 谢谢你的所有答案.我已经使用动态数据了.所以我不必为每个新的嵌套属性添加switch语句.

这是我的解决方案:(创建一个扩展MatTableDataSource的新DataSource不是必需的)

export class NestedObjectsDataSource extends MatTableDataSource<MyObjectType> {

  sortingDataAccessor: ((data: WorkingHours, sortHeaderId: string) => string | number) =
    (data: WorkingHours, sortHeaderId: string): string | number => {
      let value = null;
      if …

任何人都可以向我澄清我应该如何使用.forRoot()调用构建多个嵌套的功能模块层次结构？

例如,如果我有这样的模块怎么办:

- MainModule
- SharedModule
- FeatureModuleA
    - FeatureModuleA1
    - FeatureModuleA2
- FeatureModuleB

所有要素模块都具有.forRoot()静态函数.

我应该如何定义FeatureModuleA以某种方式"转移".forRoot()函数？

@NgModule({ 
  imports: [
    //- I can use .forRoot() calls here but this module not the root module
    //- I don't need to import sub-modules here, FeatureA only a wrapper
    //FeatureModuleA1.forRoot(), //WRONG!
    //FeatureModuleA2.forRoot(), //WRONG!
  ],
  exports: [
    //I cannot use .forRoot() calls here
    FeatureModuleA1, 
    FeatureModuleA2 
  ]
})
class FeatureModuleA {
  static forRoot(): ModuleWithProviders {
    return {
      //At this point I can set any …

我已经安装了角度材料,

我在我的app模块上导入了MatIconModule(带import { MatIconModule } from '@angular/material/icon';)

我在我的ngmodule导入下添加了:

@NgModule({
    imports: [ 
//...
MatIconModule, 
//...

我已经导入了所有样式表

我还在我的应用程序组件中导入它,实际上(尝试)使用它们(import {MatIconModule} from '@angular/material/icon';在它的开头有另一行).

但材料图标仍然没有出现.

例如,使用此行:

<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

我期待这样的事情:

但我明白了:

有什么建议吗？

我正在尝试<mat-form-field在使用Material2的Angular项目中使用,但我已经碰壁了.

获取以下错误消息.

Uncaught Error: Template parse errors:
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-form-field>
  <input matInput placeholder="Simple placeholder" required>
</mat-form-field>"): ng:///MaterialModule/SearchComponent.html@0:0
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24660)
    at JitCompiler._parseTemplate (compiler.js:34471)
    at JitCompiler._compileTemplate (compiler.js:34446)
    at eval (compiler.js:34347)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents …

我正在寻找一种在md-table中高亮显示整行的好方法.
我应该做指令还是什么？
有人可以帮我这个吗？

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

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- ID Column -->
    <ng-container cdkColumnDef="userId">
      <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container cdkColumnDef="progress">
      <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container cdkColumnDef="userName">
      <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.name}} …

我正在使用MatPaginator组件,我正在试图弄清楚如何翻译这些标签(文档对此不够清楚).

我发现这篇文章显示了如何执行此操作,并按照以下步骤操作:

1 - 我创建了一个名为的文件custom-paginator.ts并在其中放置以下内容:

import { MatPaginator, MatPaginatorIntl } from '@angular/material';

export class CustomPaginator extends MatPaginatorIntl {
  constructor() {
    super();
    this.nextPageLabel = ' My new label for next page';
    this.previousPageLabel = ' My new label for previous page';
    this.itemsPerPageLabel = 'Task per screen';
  }
}

2 - 在app.module.ts我说:

@NgModule({
  // ...
  providers: [
    {
      provide: MatPaginatorIntl,
      useClass: CustomPaginator
    }
  ]
})
export class AppModule

但是,它根本不会改变任何东西.我错过了什么？

当使用角度材料表时,如何定义索引变量,因为此表中未使用ngFor.

我确实在文档中搜索了它,但索引没有被提到任何位置.

  <mat-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- 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 …

我有一个混合的Angular1和Angular2应用程序.在我路由到的一个Angular2组件中,我想使用Material Design Button.

当我像这样<md-button>foo</md-button>在模板中插入一个按钮时,应用程序开始与此控制台消息一起崩溃

Error: Template parse errors:
'md-button' is not a known element:
1. If 'md-button' is an Angular component, then verify that it is part of this module.
2. If 'md-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<h1>Job</h1>[ERROR ->]<md-button>material</md-button>"): JobComponent@0:12
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8321:21)

所以,它听起来就像是消息的情况下,1,但我已经试过在给出的建议这个答案添加MdButton到imports我的财产NgModule(其中已经包含MaterialModule.forRoot()由作为劝文档),但如果我这样做,整个应用程序在控制台中出现空白而没有错误.

这是一些相关的代码

import { UIRouterModule } from "ui-router-ng2";
import { …

我正在使用Angular 4和Angular Material 2.对于以下代码:

<form>
  <md-form-field>
    <input mdInput [ngModel]="userName" placeholder="User" [formControl]="usernameFormControl">
    <md-error *ngIf="usernameFormControl.hasError('required')">
      This is <strong>required</strong>
    </md-error>
    <input mdInput [ngModel]="password" placeholder="Password" [formControl]="passwordFormControl">
    <md-error *ngIf="passwordFormControl.hasError('required')">
      This is <strong>required</strong>
    </md-error>
    <button md-raised-button color="primary" [disabled]="!usernameFormControl.valid || !passwordFormControl.valid">Login</button>
  </md-form-field>
</form>

我收到一个错误:

模板解析错误:'md-form-field'不是已知元素:1.如果'md-form-field'是Angular组件,则验证它是否是此模块的一部分.2.如果'md-form-field'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息.("[错误 - >]

你能不能帮我解决我失踪的地方？

以下是我app.module.ts导入材料模块的代码:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginComponent …

对于mdDialog,我如何传入变量？具体来说,如何将Angular服务注入对话框组件？