标签: angular-material2

我正在学习Angular2 RC5Angular2材料库并让它在AspNetCore 1.0应用程序中运行,VisualStudio 2015.我使用了一个运行良好的Angular2 RC5单页面应用程序,并试图引入延迟加载,其中只有登录页面将首先加载.当我成功登录后,我想加载剩余的页面.

当我在SPA模式下单击登录按钮时,我会成功重定向到预先加载了登录页面的DashboardComponent页面 - 这是在我引入延迟加载之前.按照本教程后,我现在得到这些错误

错误代码段

EXCEPTION: Error: Uncaught (in promise): Template parse errors: Can't bind      to 'ngIf' since it isn't a known property of 'md-card-title'.
1. If 'md-card-title' is an Angular component and it has 'ngIf' input, then verify that it is part of this module.
2. If 'md-card-title' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. …

Run Code Online (Sandbox Code Playgroud)

我目前在Angular 2.4.0应用程序中使用Angular Material2(使用@angular/material: 2.0.0-beta.1).出于某种原因,md-select下拉菜单,而不是出现在初始值或占位符或箭头上以选择下拉列表,如材料文档中的这些示例所示,一直显示在页面底部.至于如果md-select下拉列表位于页面的右上角(我尝试放置的组件位于页面的右上角),当您单击箭头查看下拉选项时,它将滚动您将在页面底部显示它们.它们也将是页面的整个宽度,而不是下拉列表的宽度.

这是我的组件(至少相关位 - 这个应用程序相当大+我注释掉或删除了与下拉列表无关的代码(并删除了视图中除了下拉列表以外的所有内容)以及让阅读此内容的人更容易看到问题)):

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

@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my-component.component.html',
  styleUrls: ['my-component.component.css'],
  providers: [FormBuilder]
})

export class MyComponent implements OnInit {
  @Input() page: Page;
  canvasBackgroundColors: string[] = ['White', 'Pink', 'Black'];
  draftModule: FormGroup;

  // --- Component Constructor ---

  constructor(private formBuilder: FormBuilder){}

  // --- Angular LifeCycle Hooks ---

  ngOnInit() {
    this.formBuilderInit();
  }

  // --- UI Delegates ---
  public …

到目前为止,我已经尝试了很多不同的东西,例如:

/deep/ .mat-select:focus .mat-select-trigger .mat-select-arrow {
    color: #63961C;
}

/deep/ .mat-select:focus .mat-select-trigger .mat-select-underline {
    background-color: #63961C;
}

要么 :

/deep/ .mat-select.mat-focused .mat-select-trigger .mat-select-arrow {
    color: #63961C;
}

/deep/ .mat-select.mat-focused .mat-select-trigger .mat-select-underline {
    background-color: #63961C;
}

更改选择旁边的小箭头和下划线.

例如,我做到了

/deep/ .mat-input-container.mat-focused .mat-input-underline {
    background-color: #63961C;
}

对于输入的下划线,它工作正常(聚焦时变为绿色).(是/深/适用于这个项目,虽然如果我记得很清楚它现在已被弃用)

我设法"一直"改变它,但我想要的是,它只在焦点上绿色,如果没有聚焦则保持灰色.

当选项卡在选项卡内时,如果选择的子选项卡索引为1,则它应显示为已选中.

让父选项卡有两个选项卡,它selectedIndex是0,父选项卡selectedIndex1中的子选项卡有= 1,然后显示内容但显示为未选中.标签内容正在显示,但未选中标签

这是工作示例

这是表格html:

<mat-table matSort class="inbox__messages" #table [dataSource]="dataSource">

<!-- Building Column -->
<ng-container matColumnDef="building">
  <mat-header-cell *matHeaderCellDef>
  <div class="inbox__messages__header">
    <h3 class="inbox__messages__header-label">Bâtiments</h3>
    <mat-form-field class="inbox__messages__dropdown">
      <mat-select placeholder="Choisir un bâtiment">
        <mat-option *ngFor="let building of buildings" [value]="building.value">
          {{ building.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  </mat-header-cell>
  <mat-cell *matCellDef="let element">
  <span class="inbox__messages__body-building">{{element.building}}</span>
</mat-cell>
</ng-container>

 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row" [class.expanded]="expandedElement == row"
(click)="expandedElement = row"></mat-row>

ng测试时会发生此错误.我错过了什么？我已将MatHeaderRowDef导入到我的组件以及模块中.

在使用https://material.angular.io/components/select/overview#multiple-selection

如何将选择的项目数限制为N个？其中N是3或4或5。

我需要获取垫选择的数据，具体是文本及其值。到目前为止，这就是我实施Mat-select的方式。

<mat-select placeholder="Transaction Type" (selectionChange)="selected($event)" formControlName="TransactionTypeID">
    <mat-option *ngFor="let t of transactionTypes" [value]="t.TransactionTypeID">
        {{t.TransactionType}}
    </mat-option>
</mat-select>

这就是我在.ts文件中获取值的方式： this.formDetail.get('TransactionTypeID').value,

这是我尝试获取文本或“ t.TransactionType”的尝试：

selected(event: MatSelectChange) {
    console.log(event);
}

你能告诉我怎么做吗？谢谢。

我想在选项文本下有其他描述选项的行。默认情况下，mat-select限制字符数，并在行末添加“ ...”。我想有需要的多行选项。stakckblitz演示：https : //stackblitz.com/edit/angular-wj9svw 我的代码：

export class SelectOverviewExample {
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak longDescription longDescription longDescription longDescription longDescription'},
    {value: 'pizza-1', viewValue: 'Pizza longDescription longDescription longDescription longDescription longDescription longDescription v v longDescription'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];
}

的HTML：

<mat-form-field>
  <mat-select placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
      <b> some additional text text text text texttext </b>
    </mat-option>
  </mat-select>
</mat-form-field>

我有一个复选框列表：

    <section *ngFor="let item of list">
      <mat-checkbox [checked]="item.value" (click)="toggle(_checkbox_value_here_)">{{item.key}}</mat-checkbox>
    </section>

我需要将checkbox值（_checkbox_value_here_）传递给我的函数，您将如何处理？

我可以看到这个相关的问题，如何在角形材质中获取复选框数据，但实际上是否有一种方法可以在不使用ngModeland的情况下实现reactive forms呢？

我正在尝试对该材质对话框进行单元测试，以测试模板是否正在渲染正确的注入对象。正确使用该组件即可正常工作

组件-对话框

export class ConfirmationDialogComponent {

  constructor(@Inject(MAT_DIALOG_DATA) private dialogModel: ConfirmationDialogModel) {}
}

对话框模板

<h1 mat-dialog-title *ngIf="dialogModel.Title">{{dialogModel.Title}}</h1>
<div mat-dialog-content>
  {{dialogModel.SupportingText}}
</div>
<div mat-dialog-actions>
  <button mat-button color="primary" [mat-dialog-close]="false">Cancel</button>
  <button mat-raised-button color="primary"[mat-dialog-close]="true" cdkFocusInitial>{{dialogModel.ActionButton}}</button>
</div>

模型-正在注入什么

export interface ConfirmationDialogModel {
  Title?: string;
  SupportingText: string;
  ActionButton: string;
}

单元测试-问题出在哪里

describe('Confirmation Dialog Component', () => {

  const model: ConfirmationDialogModel = {
    ActionButton: 'Delete',
    SupportingText: 'Are you sure?',
  };

  let component: ConfirmationDialogComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ConfirmationDialogComponent
      ],
      imports: [
        MatButtonModule,
        MatDialogModule
      ],
      providers: [ …