标签: angular-material2

当Angular Material 2中的所需输入无效时,我试图显示错误消息.Angular Material演示应用程序中有一个示例:

<form novalidate>
  <h4>Inside a form</h4>

  <md-input-container>
    <input mdInput name="example" placeholder="example"
      [(ngModel)]="errorMessageExample3" required>
    <md-error>This field is required</md-error>
  </md-input-container>

  <button color="primary" md-raised-button>Submit</button>
</form>

预期结果

不幸的是,当我尝试做同样的事情时,我得到:

Unhandled Promise rejection: Template parse errors:
'md-error' is not a known element:
1. If 'md-error' is an Angular component, then verify that it is part 
   of this module.
2. If 'md-error' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' 
   to the '@NgModule.schemas' of this component to suppress this message.

我应该怎么做才能使用<md-error>？

使用Angular 2和材料设计,尝试在sidenav中获取嵌套列表我有类似的代码

<md-sidenav #sidenav class="sidenav" mode="over" opened>
    <md-nav-list>
           <md-card class="user-card">
               <md-card-header>
                 <div md-card-avatar class="user-avatar"></div>
               </md-card-header>
           </md-card>
      <md-divider></md-divider>
      <md-list-item *ngFor="let category of ategories">
         <a md-line>{{ category.name }}</a> 
      </md-list-item>
    </md-nav-list>
</md-sidenav>

哪个工作正常,看起来像

现在,当我试图嵌套它时,就像

<md-sidenav #sidenav class="sidenav" mode="over" opened>
    <md-nav-list>
           <md-card class="user-card">
               <md-card-header>
                 <div md-card-avatar class="user-avatar"></div>
               </md-card-header>
           </md-card>
      <md-divider></md-divider>
      <md-list-item *ngFor="let category of ategories">
         <a md-line>{{ category.name }}</a>
         <md-list-item *ngFor="let subcategory of category.subcategories">
            <a md-line>{{ subcategory.subcategory }}</a>
         </md-list-item>
      </md-list-item>
    </md-nav-list>
</md-sidenav>

看起来像

我想实现嵌套列表,可能是可折叠的.知道我做错了什么或如何处理这个问题？

我想将自定义html从特定页面传递到模板组件,以便使用Material(MdDialog)创建对话框.直到现在我可以将简单数据传递给模板,如下所示:

    import { Component, OnInit, Input, TemplateRef } from '@angular/core';
    import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';
    import { DialogComponent } from './dialog.component';


    @Component({
      selector: 'app-commoncontent',
      template: '
       <div class="row  pull-right">
         <button md-raised-button (click)="open()" >{{"addButton" | translate}}
         </button>
       </div>',
      styleUrls: ['./commoncontent.component.css']
    })
    export class CommoncontentComponent implements OnInit {
      constructor(public dialog : MdDialog) { }

      ngOnInit() {
      }

      open() {
          let config = new MdDialogConfig()
          let dialogRef:MdDialogRef<DialogComponent> = 
          this.dialog.open(DialogComponent, config);
          dialogRef.componentInstance.content = "Hello Angular"

      }
    }

    import { Component, OnInit, …

我希望它只是即插即用:-)我一直在喋喋不休地打了几个小时没有我的小实验工作.md数据表是新的,因此Web上几乎没有神圣的知识.找到将Firebase连接到桌面的好方法将是一个良好的开端.有任何想法吗？

目前我有这个设置.我的代码很好,没有带有标准Angular设置和代码的表,使用ngFor并从模板创建列表.因此代码使用AngularFire 2从Firebase传递数据.尝试新的md数据表是个问题.

首先,模板不会渲染.我知道我已正确设置NgModule,所以我怀疑数据源没有连接并创建此错误.这是Chrome控制台中的错误.

Template parse errors:
Can't bind to 'dataSource' since it isn't a known property of 'md-table'.
1. If 'md-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.

我的members- search.component.html看起来与官方文档完全相同,只是我更改了模板绑定:

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

<ng-container cdkColumnDef="memberName">
    <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
    <md-cell *cdkCellDef="let row"> {{member.firstName}} {{ member?.lastName }} </md-cell>
</ng-container>

members-search.component.ts包含以下相关部分:

import { DataSource } from '@angular/cdk';

@Injectable()
export class MembersAdminService {

  private members$: FirebaseListObservable<Member[]>;
  private dataSource: DataSource<any>;

  constructor(
      private …

我在我的应用程序中使用Angular2 Material Design数据表,它很棒.我想知道是否有办法获得索引号或行号？有点像row.index？我在CDK数据表文档中注意到它提到"该指令还导出与ngFor相同的属性(索引,偶数,奇数,第一个,最后一个)",但没有任何示例如何获取索引.

非常感谢任何帮助或指导.谢谢!

我使用新的Angular材料.此代码生成具有两列的网格:

<md-grid-list cols="2" rowHeight="10">
  <md-grid-tile></md-grid-tile>
  <md-grid-tile></md-grid-tile>
</md-grid-list>

如何将20%宽度设置为第一列并将80%重新设置为秒？

我目前正在制作一个表格,用户可以通过按Enter键来浏览可编辑元素.我也在这里使用Angular Material.

我有一个mat-form-field,带有几个动态创建的输入字段和mat-autocomplete元素.但是我的回车键事件在这方面有点不同.

当您按下输入字段时,将打开一个面板(下拉列表),用户可以在其中选择输入,或者他可以简单地自己编写,面板将提供建议(自动完成).

如果按Tab键会发生什么？

如果在键入时按Tab键,光标将移动到下一个可编辑元素,并且最新元素的面板(下拉列表)将关闭.

如果按Enter键会发生什么

如果在键入时按Enter键,光标将移动到下一个可编辑元素但是最新元素的面板(下拉列表)保持打开状态,这导致多个输入字段具有打开的下拉面板,即使用户已经写了他需要的内容至.

模板:

<tr *ngFor="let row of rows; let rowIdx = index">
            <td *ngFor="let col of columns; let colIdx = index">
                <mat-form-field class="example-full-width">             
                <input  #inputs type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"
                    (keyup.enter)="shiftFocusEnter(rowIdx, colIdx)">
                    <mat-autocomplete #auto="matAutocomplete">
                            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                            {{ option }}
                            </mat-option>
                        </mat-autocomplete>
                    </mat-form-field>
            </td>
      </tr>

这只是根据数组中对象的数量创建行(这里不太重要).

输入字段上还有一个keyup.enter事件,当用户按下输入时会触发,同时焦点位于输入字段上,并传递行索引和列索引以获取下一个可编辑元素.

零件:

shiftFocusEnter(rowIdx: number, colIdx: number) {
console.log("Enter", rowIdx, colIdx);  
if(colIdx == 4 && rowIdx == 5) {
  console.log("Reached end of …

我已经实现了角度材料滑动切换,除了某些原因它由于某种原因没有将值绑定到相关变量之外似乎都有效吗？

// other irrevelant imports above..
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss'],
    host: {
     '(document:click)': 'handleClickEvent($event)',
  }
})

export class CalendarComponent implements OnInit {

  filteringSchedule: boolean = false;
  filteringSent: boolean = false;
  filteringFailed: boolean = false;
}

// 零件

<mat-slide-toggle
    class="calendar-filter-types"
    [ngModel]="(filteringSchedule)"
    [color]=""
    [checked]="">
    Scheduled : {{ filteringSchedule }}
</mat-slide-toggle>

一旦我检查或取消选中切换,我会期望值相应filteringSchedule地更改为true或false？然而,在组件内部,它始终保持false原因不明 - 有人能说明为什么会这样吗？

我是Angular 4

我有一个包含10个条目的水果列表.我想这样做,以便水果名称文本(在垫片旁边)显示在两列中,每列5个.我正在使用的芯片在这里:https://material.angular.io/components/chips/api

我的CSS:

.flexp {
    display: flex;
    flex-wrap:wrap;
}

.flexc {
    flex-grow: 1;
    display: inline-block;
}

HTML

       <div class="flexp" *ngFor="let fruit of fruits">
              <div class="flexc">
                <mat-chip>
                  {{fruit.typeOfFruit}}
                </mat-chip>
                {{fruit.name}}
              </div>
          </div>

我怎样才能做到这一点？现在我的flexbox从上到下.

我想制作它看起来像一个表,但不必创建结构.如果有一种方法让ngFor足够聪明,以这种方式显示......这就是我要找的东西:

<table>
<tr>
<td>Fruit 1</td><td>Fruit 6</td>
<td>Fruit 2</td><td>Fruit 7</td>
<td>Fruit 3</td><td>Fruit 8</td>
<td>Fruit 4</td><td>Fruit 9</td>
<td>Fruit 5</td><td>Fruit 10</td></tr>
</table>

如果不可能,请说明.

在我升级到6之前,代码运行正常.不确定之间发生了什么变化!我也需要导入模块

MatInputModule,
MatSelectModule,
MatFormFieldModule

  <mat-input-container>
    <mat-select placeholder="Sort By" formControlName="sortBy">
      <mat-option *ngFor="let sortByObject of sortByList" [value]="sortByObject.value">
        {{ sortByObject.label }}
      </mat-option>
    </mat-select>
  </mat-input-container>