标签: angular-material

I am using Angular material auto-complete to display suggestion based on user typing. As user types I make API calls and bring the data to be displayed. Now in some cases the results are huge in number say 500-1000 and hence the DOM stops responding.

I am looking for a way where I can limit these suggestion to some specific values and then increase them (on say scroll).

I checked if I could use limitTo with it like we use …

在MD-芯片具有只读属性，它禁止列表操作（删除或添加列表项），隐藏输入和删除按钮。如果未提供 ng-model，则芯片将自动标记为只读。

但是md-contacts-chips没有readonly属性。

如何禁用芯片的移除按钮？

我正在创建一个具有物化设计的 angular2 应用程序。我正在尝试创建一个布局，我希望将布局分为两部分。我用过md-grid-list。为此，请参考文档https://material.angular.io/components/grid-list/overview。md-grid-list rowHeigh="fit"不工作。是否有替代解决方案使行高与屏幕高度相似。

这是我正在处理的 project.component.html 文件。

<md-toolbar><h2>Projects</h2></md-toolbar>
<md-grid-list cols="50" rowHeight="fit" >
  <md-grid-tile [colspan]="15"> 1 </md-grid-tile>
  <md-grid-tile [colspan]="35" >2</md-grid-tile>
</md-grid-list>

当我提供style="height:300px"它看起来像这样。 在此处输入图片说明

但是我想把整个屏幕一分为二。所以我用了cols="2"。我可以改变高度以使其适合整个屏幕。但是我不能给内容一个固定的高度，因为它可以根据内容中可用的数据进行更改。

我正在使用 material2 v2.0.0-beta.10 以及 Angular v4，并且在使用md-calendar组件时遇到问题。我的问题是我无法将startAt日期设置为任何内容。

我将开始日期设置为昨天，如下所示：

  this.startAt = new Date();
  this.startAt = this.startAt.setDate(this.startDate - 1);

这是一个尝试将startAt日期设置为昨天的 Plunkr 。

我错过了什么？

我正在使用角材料 2 库和md-checkbox元素。

就像是：

<md-checkbox id="myInput"
             labelPosition="after"
             (change)="toggleOnChange($event)">
  Label
</md-checkbox>

稍后在一些其他事件（与此输入无关）我想重置其状态（如果选中，则标记为未选中）。我该怎么做？API支持吗？根据文档，没有这样做的方法。

如果我尝试在元素上切换类，则“视觉上”会取消选中它，但会保留状态。

自从 Angular 材料更新后，我在尝试构建/运行我的项目时遇到了错误。这些错误都存在于节点模块下的@angular/material 中。angular material version 2.0.0-beta.10 工作得很好，然后更新了，现在没有任何效果。

我已经修复了需要将导入和实现从 Md 更改为 Mat（例如 MdToolbarModule 更改为 MatToolbarModule）的错误，该错误修复了实际出现在 Visual Studio 中的错误，但现在构建所有这些错误都会发生。

ERROR in C:/Users/lajos/Source/Repos/Appraiser/SafeAtHome/node_modules/@angular/material/menu/typings/menu-item.d.ts (20,42): Type '(new (...args: any[]) => CanDisable) & typeof MatMenuItemBase' is not a constructor function type.
ERROR in C:/Users/lajos/Source/Repos/Appraiser/SafeAtHome/node_modules/@angular/material/core/typings/option/optgroup.d.ts (9,22): Class 'MatOptgroup' incorrectly implements interface 'CanDisable' Property 'disabled' is missing in type 'MatOptgroup'.
ERROR in C:/Users/lajos/Source/Repos/Appraiser/SafeAtHome/node_modules/@angular/material/button/typings/button.d.ts (55,22): Class 'MatButton' incorrectly implements interface 'CanColor'. Property 'color' is missing in type 'MatButton'.
ERROR in C:/Users/lajos/Source/Repos/Appraiser/SafeAtHome/node_modules/@angular/material/button/typings/button.d.ts (55,22): Class 'MatButton' incorrectly implements interface …

我正在关注此处的文档。我可以将数据传递给对话框，但我没有从中获取数据。我在 .afterClose().subscribe() 上得到了未定义的结果。我错过了什么？我猜我需要在对话框的模板中做一些事情，但上面的文档没有提供示例。这是我的代码：

import {Component, Inject, OnInit} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

import {MySavior} from '../shared/my-savior';
import {Savior} from '../../savior/shared/savior';
import {SaviorDataService} from '../../savior/shared/savior-data.service';

@Component({
  selector: 'app-my-room-savior-select-dialog',
  template: 'my data name: {{data.name}}'
})
export class MySaviorSelectDialogComponent {
  constructor(public dialogRef: MatDialogRef<MySaviorSelectDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {}

  onClose(): void {
    this.dialogRef.close();
  }
}


@Component({
  selector: 'app-my-room-my-savior',
  templateUrl: './my-savior.component.html',
  styleUrls: ['./my-savior.component.css']
})
export class MySaviorComponent implements OnInit {

  saviors: Savior[] = [];
  mySaviors: MySavior[] = [];

  constructor(private saviorDataServ: …

我正在使用 material.angular.io 中的 mat-chips

<mat-chip-list class="categories">
    <mat-chip><a href="/publication/category/{{category.id}}">
    {{category.name}}</a></mat-chip>
</mat-chip-list>

如果我用鼠标的中心按钮单击，该链接将起作用并打开另一个选项卡，但我无法用左键单击打开该链接。

我尝试使用 class="link-overlapping"，但仍然无法正常工作。

试图模拟这个例子https://material.angular.io/components/icon/examples

这是我的组件代码：

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

import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material';
import { MatFormFieldControl } from '@angular/material';
import { MatChipInputEvent } from '@angular/material';
import { ENTER, COMMA } from '@angular/cdk/keycodes';

@Component({
  selector: 'hello',
  template: `

      <mat-form-field class="demo-chip-list">
        <mat-chip-list #chipList>
          <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
                  [removable]="removable" (remove)="remove(fruit)">
            {{fruit.name}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
          <input placeholder="New fruit..."
                [matChipInputFor]="chipList"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [matChipInputAddOnBlur]="addOnBlur"
                (matChipInputTokenEnd)="add($event)" />
        </mat-chip-list>
      </mat-form-field>
  `,
  styles: [`h1 { font-family: Lato; }`] …

我有使用反应式的简单形式，我可以选择使用模板驱动形式的选项，但我不能使用反应式形式做同样的事情。这里做错了什么

<form [formGroup]="reactiveform">
<mat-form-field>
  <mat-select placeholder="Gender" [(value)]="gendervalue" formControlName="gender">
    <mat-option value="female">Female</mat-option>
    <mat-option value="male">Male</mat-option>
  </mat-select>
</mat-form-field>
</form>

<p>Form value: {{ reactiveform.value | json }}</p>

直播链接。