标签: angular-material2

我在这里做了一个简单的代码http://embed.plnkr.co/INpybaat2XZqdStsKAdy/.卡片没有在一行中呈现.如何使它在一行中呈现？谢谢.

当我使用@angular/material和时,我收到以下错误@angular/cdk:

http://localhost:3000/@angular/cdk/observe-content (404) Not found error

systemjs.config.js

map: {
       ...

    // Angular Material 
    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',

    // CDK individual packages
    '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
    '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
}

materialmodule.ts

import { NgModule }      from '@angular/core';
import { MdButtonModule, MdCheckboxModule,MdButton } from '@angular/material';

@NgModule({
    imports: [
        MdButtonModule,
        MdButton
    ],
    exports: [
        MdButtonModule,
        MdButton
    ]
})
export class CustomMaterialModule { }

app.component.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { …

有谁知道选择 Tab 1 时如何调用函数？md-on-select 不再有效

<md-tab-group>
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

我有一个 angular 4 材质表格单元格中的按钮，我只想在悬停在表格行上时出现：

<md-cell *cdkCellDef="let row" contenteditable='false' > 
        <div *ngIf="!row.editorEnabled" >{{row.goalStatusName}}
            <button md-icon-button><md-icon (click)="row.editorEnabled=true;" mdTooltip="Edit">mode_edit</md-icon></button>
          </div>
</md-cell>

我如何实现这一目标？

更新：整个代码：

<md-cell *cdkCellDef="let row" contenteditable='false' > 
        <div *ngIf="!row.editorEnabled" >{{row.goalStatusName}}
            <button md-icon-button><md-icon (click)="row.editorEnabled=true;" class="editButton" mdTooltip="Edit">mode_edit</md-icon></button>
          </div>
        <div *ngIf="row.editorEnabled" >
          <md-input-container><input mdInput [(ngModel)]="row.goalStatusName" #goalName></md-input-container>
            <button md-icon-button>
              <md-icon (click)="modifyGoal(row.goalStatusId,row.goalStatusName)" mdTooltip="Save" style="color:green;font:bold;" >done</md-icon>
            </button>
            <button md-icon-button>
              <md-icon (click)="row.editorEnabled=false" mdTooltip="Cancel" style="color:red;font:bold;" >clear</md-icon>
            </button>
          </div>
    </md-cell>

我必须将输入集中在加载模式上，但是如果我使用html5属性，autofocus它似乎无法正常工作。有可能使其工作吗？

<div class="col-md-6">
 <div class="form-group label-floating">
  <label class="control-label">
    {{'ticketbundle.busroutedetail.dialog.labels.buslinename'
     | translate }}<span class="star">*</span>
   </label><input autofocus class="form-control" id="name" required
   [(ngModel)]="busRouteDetail.name" name="name" #busRouteDetailname>
 </div>
</div>

我正在使用角材2

我使用Angular 5和Angular材料以及WebStorm版本2017.3.1

当我尝试使用<mat-toolbar>具有以下代码的元素时

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<mat-toolbar>
  <span>Title</span>
</mat-toolbar>

WebStorm给了我一个错误:

'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.

但是,这在浏览器中正确呈现:

因为它 …

我将中心垫标题文本。因此，我需要将宽度设置为100％，但只有使用“ px”时，我才不会得到结果。

因此，我尝试对所有父母容器设置宽度，但没有结果。

这是我的html文件

<div Fxlaout="row" fxLayoutGap="20px" class="container">
    <div fxFlex=30>
        <mat-card>
            <mat-card-header>
                <mat-card-title>Collaborateurs sur ce projet</mat-card-title>
            </mat-card-header>
            <mat-card-content>

                <mat-list role="list" *ngFor="let per of Projet?.pers">
                    <mat-list-item role="listitem">Nom : {{per.name}}</mat-list-item>
                    <mat-list-item role="listitem">poste : {{per.poste}}</mat-list-item>
                </mat-list>
            </mat-card-content>
        </mat-card>
    </div>
    <div fxFlex>
        <mat-card>
            <mat-card-header>
                <mat-card-title>Les fonctionnalités du produit</mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <mat-list role="list" *ngFor="let func of Projet?.backlog.fonctionnalite; let i=index">
                   <mat-list-item role="listitem">Fonctionnalité #{{i}} : {{func.fonctionnalite}}</mat-list-item>
                </mat-list>
            </mat-card-content>
         </mat-card>
    </div>
</div> 

CSS文件

  mat-card {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0;
    width: 100%;
  }
  mat-card-header {
    background-color: #116a94; …

我需要制作响应表,甚至可以在移动视图中呈现而不会分解.为了使它工作,我使用下面的标准HTML表链接

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

看看样本:https://www.w3schools.com/howto/howto_css_table_responsive.asp

它工作得很好但最近切换到Angular 5表,它没有响应式设计的API.如何将overflow-x auto添加到角表？样本角5表:

https://stackblitz.com/edit/angular-material-table-data-source-ibmgv2 提前致谢

我在我的项目中使用Angular 5和材料垫表。

在我的组件文件中，我使用observable从服务中检索数据并将其绑定到组件上的变量。Mat-table显示行，但不打印数据。我尝试了ngFor，它似乎可以工作。控制台中没有错误。有什么想法为什么表格不显示在数据中？

TS：

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

import { NotificationService } from './../../core/services/notification.service';
import { OperationConfiguration } from './../../core/models/operationConfiguration';
import { ProgressBarService } from '../../core/services/progress-bar.service';
import { OperationConfigurationService } from '../../core/services/operation-configuration.service';

@Component({
  selector: 'app-operation-configuration-list',
  templateUrl: './operation-configuration-list.component.html',
  styleUrls: ['./operation-configuration-list.component.css']
})
export class OperationConfigurationListComponent implements OnInit {

  operationConfigurations: OperationConfiguration[];
  columnsToDisplay: ['id', 'columnName', 'hidden'];

  constructor(private progressBarService: ProgressBarService,
    private notificationService: NotificationService,
    private configurationService: OperationConfigurationService) {
    this.progressBarService.show();
  }

  ngOnInit() {
    this.loadOperationConfigurations();
  }

  private loadOperationConfigurations(): void {

    this.configurationService.getAll(null)
      .subscribe(
        results => …

MatSortable的排序方向上存在三种状态。有没有办法禁用第三种状态？它有'asc' | 'desc' | ''，ID只能'asc' | 'desc'提供。我目前正在过滤排序方向，但是我想知道，即使标题确实显示了具有当前排序方向的箭头，从用户角度来看，这是否足够直观以至看起来也不像是一个错误（请参见下图）。

• 材质角

• 垫子桌子

Oninit生命周期挂钩我正在设置默认排序方式，以为将disableClear设置为true可以解决此问题，但是不行。任何帮助表示赞赏！

defaultSort: MatSortable = {
  id: 'displayName',
  start: 'asc',
  /**
   * Whether to disable the user from clearing the sort by finishing the sort direction cycle.
   * May be overriden by the MatSortable's disable clear input.
   */
  disableClear: True
};

ngOnInit() {
  this.sort.sort(this.defaultSort);

  this.sort.sortChange.pipe(
    filter(sort => !!sort.direction),
    switchMap(sort => {
      // makes API request only with an actual direction.
    })
  );
}

没有排序方向：

带有排序说明：