标签: angular-material

我正在尝试将CDK数据表转换为Material Design样式的数据表(请参阅:https://material.angular.io/components/table/overview),但是当我将cdk前缀更改为md时,我得到以下错误...

未捕获错误:模板解析错误:无法绑定到'mdHeaderRowDef',因为它不是'md-header-row'的已知属性.1.如果'md-header-row'是一个Angular组件并且它有'mdHeaderRowDef'输入,那么请验证它是否是该模块的一部分.2.如果'md-header-row'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息.3.要允许任何属性将"NO_ERRORS_SCHEMA"添加到此组件的"@NgModule.schemas".

我在网上发现的每个答案都告诉我,我需要导入CdkTableModule,但我已经这样做了&cdk表工作得很好.

import {Component, OnInit, ViewChild} from '@angular/core';
import {DataSource} from '@angular/cdk';
import { CdkTableModule } from '@angular/cdk';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';

我正在导入CdkTableModule,当我使用cdk前缀时,表格按预期显示...

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

  <ng-container cdkColumnDef="number">
    <md-header-cell *cdkHeaderCellDef> number </md-header-cell>
    <md-cell *cdkCellDef="let element"><a routerLink="{{element.number}}"> {{element.number}} </a></md-cell>
  </ng-container>

  <ng-container cdkColumnDef="book">
    <md-header-cell *cdkHeaderCellDef> book </md-header-cell>
    <md-cell *cdkCellDef="let element"> {{element.book}} </md-cell>
  </ng-container>

  <md-header-row *cdkHeaderRowDef="['number', 'book']"></md-header-row>
  <md-row …

我正在尝试将角度/材质sidenav的高度设置为100％。由于某些原因，将其设置为22px使得它无法使用，因为sidenav中的任何项目都填满了整个高度...我设法通过使用mat-sidenav-container全屏属性来使其工作，但是当我执行所有其他内容时（应该在sidenav旁边）不会显示...阅读sidenav文档后发现：

“对于全屏Sidenav，推荐的方法是设置DOM，以便DOM自然可以占用全部空间：”

然后他们有一个示例，我正在尝试复制。当我在mat-sidenav-container的css样式（铬）中查看我的sn-content div时，我看到高度由于某些原因而变灰了吗？我已经从chrome dev tools inspect元素复制了选择器路径，并将高度设置为100％，但仍然没有运气。我也尝试使用！important，但这也没有任何改变。任何想法我在做什么错/这里可能会发生什么？

我的导航组件的html代码：

<mat-sidenav-container position="start">
    <mat-sidenav #sidenav mode="push">
        Navigation component width is ok
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </mat-sidenav>
    <div class="sn-content">
    <button type="button" (click)="sidenav.toggle()">toggle</button>
    </div>
</mat-sidenav-container>

我的导航组件的CSS：

body > app-root > app-home > navigation > mat-sidenav-container > mat-sidenav-content {
    margin: 0;
    height: 100% !important;
    width: 100%;
}

然后，我在以下html代码中使用此导航组件：

<navigation></navigation>

        <div fxLayout="column" fxLayoutAlign="end end">
            <div fxFlex="20%">
            <h4>testing angular flex layout turning out to be quite unusual</h4>                
            </div>

        </div>

我一直在使用Angular 2开发一个应用程序,但作为一个新的开发人员,它确实是一个挣扎.到目前为止,我已经管理了很多,但我确实需要一些帮助.我正在使用一个plunkr,我正在使用它来获取带有分页,过滤和排序的Material Table,但是这个例子,以及material.angular.io上的所有其他示例都显示了一个带有数据库的示例基本上在组件类中硬编码/生成.我有一个服务调用api进行SQL查询,我想用这个填充示例中的表,但是到目前为止我的尝试都是悲惨的失败,我想我在这个过程中已经不堪重负.

根据要求,我可以发布我的组件代码,但我担心我已经去除/修改它超出了任何使用的范围.但是在那之前,下面是我想要实现的内容,以及我想用来填充数据表而不是plunkr的数据库和数据源的服务类.

如果你能提供帮助,请告诉我,你会让我头疼不已.

https://plnkr.co/edit/EU3BBlViWpPf2NJW4PXx?p=preview

我的服务

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class RcgqueueService {

  constructor(private http: Http) { }

  populateRCGQueue() {
    return this.http.get('/api/rcgqueue').map(res => res.json());
  }
}

而我目前对组件代码的可怜尝试

import { Component, ElementRef, ViewChild, OnInit, forwardRef } from '@angular/core';
import { DataSource, SelectionModel } from '@angular/cdk/collections';
import { MatPaginator, MatSort, MatTable } from '@angular/material';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import …

我有*ngFor一些标签的md-selection-list ，例如[sport,relax,..]

标签存储在中this.tags，所选标签存储在中this.tab

我想防止用户选择5个以上的标签。因此，如果用户选择第5个项目，则应该有一些警报，并且仅当未选中某些已选中项目时，用户才能键入其他标签。

我从这段代码开始，但是没有用。我尝试禁用列表项上的“检查”图标，然后在用户存储了<5个标签之前，不要将其添加到this.tab。问题是我无法禁用此“检查”图标。

这是代码：

clickedOnRow(row){

if(this.tab.length > 5){

  this.tags.forEach((item,index) =>{
    if(item.text == row.text){

      this.selectedList.nativeElement.children[index].children[0].children[1].classList.remove('mat-pseudo-checkbox-checked')
      this.selectedList.nativeElement.children[index].children[0].children[1].className = 'mat-pseudo-checkbox'
    }
  });

}else{
  this.tab.push(row.text);
}
}

你怎么看待这件事？如何解决这个问题呢？也许还有其他解决方案，更容易吗？是为了这个问题吗？

谢谢你的帮助

我想整合来自https://material.angular.io/的 mat-table 和angularfire2/firestore https://github.com/angular/angularfire2,有些想法,我很丢失

最良好的问候

我正在我"@angular/material": "^2.0.0-beta.11"的一个宠物项目中使用,而package.json的参考如下,

"@angular/material": "^2.0.0-beta.11"

我已经导入了必要的模块如下,

import { MdToolbarModule, MdIconModule, MdGridListModule, MdButtonModule } from '@angular/material';

@NgModule({
 declarations: [        
 ],
 imports: [
 MdToolbarModule,
 MdIconModule,
 MdGridListModule,
 MdButtonModule
 ],
 providers: [],
 bootstrap: [AppComponent]
 })
export class AppModule { }

但它会抛出错误导出 'MdToolbarModule' was not found in '@angular/material'

我正在使用Angular 5和Material Design模块.

在我的HTML中,我有一个datepicker:

<mat-datepicker touchUi=true #picker></mat-datepicker>

在我的CSS中我设置了一些媒体查询:

/* Phones */
@media (max-width: 767px) {
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991px) {
}

/* Desktops */
@media (min-width: 1200px) {
}

如何删除touchUi=true桌面的属性？

In the datepicker documentation there is an example of the popup calendar being controlled programatically by using the open() and close() methods like so:

<mat-form-field class="example-full-width">
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

One can also set the opened property to true/false like so:

<button mat-raised-button (click)="picker.opened = true">Open</button>

I wonder if there is anyway to use this to get the calendar popup to stay permanently opened for the purpose of letting the user click …

我怎样才能改变该文本在垫子按钮,当我切换了吗？

<form class="example-form" style="text-align: center;" [formGroup]="loginForm" (ngSubmit)="buttonClicked()">
  <mat-card [@myAwesomeAnimation]='state' (mouseenter)="animateMe()" (mouseleave)="animateMe()" style="padding: 2vh">
      <input type="text" class="mainInput" style="font-size: 18px;" matInput autofocus shouldLabelFloat="false" placeholder="Insert Your URL Here" autocomplete="off">
  </mat-card>
  <br>
  <button mat-raised-button color="accent"></button>

</form>

我创建了一个新的angular5项目,我正在使用角度材料作为前端组件(https://material.angular.io/).一切都很好,但主要的问题是如何添加自定义主题.我没有在这个项目上使用scss编译器,所以我正在做的是将所有css组件导入到style.css中

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~app/components/test/test.component.css";

问题是我不知道如何修改预建主题的基色或为我的主题生成另一种基色的css.如果有人可以帮助我,我会非常感激!