标签: angular-material2

我正在使用Angular Material Table.在Html代码中,有

<ng-container cdkColumnDef="userId">
  <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>

我发现cdkHeaderCellDef和cdkCellDef来自CDK Table

我收到错误说" 无法绑定到'cdkHeaderRowDef',因为它不是'md-header-row'的已知属性. "

我怎么解决这个问题？

我在点击mat-nav-list项目时尝试触发打开菜单.

HTML

<mat-nav-list>
    <mat-list-item (click)="onOpenMenu(menu)" *ngFor="let i of data">
        <div mat-line>
            {{ i.name }}
        </div>
        <p mat-line>
            {{ i.email }}
        </p>
        <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon>more_vert</mat-icon>
        </button>
    </mat-list-item>
    <mat-menu #menu="matMenu">
        <button mat-menu-item>View profile</button>
        <button mat-menu-item>Add contact</button>
    </mat-menu>
</mat-nav-list>

TS

onOpenMenu(menu: any): void {
   // menu doesn't have any openMenu() function 
   // which is of course not a trigger object but a menu itself.
   console.log(menu);
}

我一直试图在github上看这个问题,这更接近我的情况.但在我的情况下,我有一个动态的项目列表,我想每次点击打开一个菜单.

DEMO

我正在使用 mat-table.它有一个工作正常的过滤器.

针对以下数据进行过滤(所有列)

const ELEMENT_DATA: Element[] = [
  {position: 14598, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 24220, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 39635, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 42027, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 53216, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 60987, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 70976, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 81297, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 90975, name: 'Fluorine', weight: 18.9984, symbol: …

已解决问题：只需添加dynamicHeight到<mat-tab-group>

我目前有一张卡片(mat-card)，里面有 2 个标签（现在你只能看到一个标签，但想法是解决这个问题以添加另一个；这将具有相同的内容，但将作为一个例子，因为它只是 Lorem Ipsum暂时文本），我不知道如何做的是删除滚动条并且内容只是不断向下拉伸卡片。

我正在使用 Angular 5，当然还有 Angular Material 5。

我尝试了通过 Google 和 StackOverflow 找到的几件事，但没有一个对我有用。我在网格系统中使用 Flexbox。

我的 lorem.component.html 代码：

<div class="content-padder content-background">
  <div class="uk-section-small uk-section-default header">
    <div class="uk-container uk-container-large uk-animation-slide-top-medium">
      <h1><span uk-icon="credit-card"></span> Lorem</h1>

      <p>Lorem</p>
      <ul class="uk-breadcrumb">
        <li><a href="#">Lorem</a></li>
        <li><span href="">Lorem</span></li>
        <li><span href="">Lorem</span></li>
      </ul>
    </div>
  </div>
  <div class="uk-section-small content-padder content-background">
    <div class="container">
      <mat-card>
          <div class="mat-tab-fix">
            <mat-tab-group>
                <mat-tab class="tabs" label="Tab 1">

                        <h2 style="padding-top: 30px;">
                            <span>Lorem</span>
                          </h2>

          <div class="card-layout">
            <div class="card-column-1"> …

我试图在 mat-select 中默认选择一个包含“空”[值] 的选项。问题是，当显示 html 时，它没有选择带有 "null" [value] 的选项。我正在使用带有 Angular Material 7 的 Angular 7 Reactive Forms。这是我所拥有的 -

网址：

<mat-select placeholder="User" formControlName="userId">
  <mat-option [value]="null">None</mat-option>
  <mat-option *ngFor="let user of users" [value]="user.userId">
      {{ user.name }}
  </mat-option>
</mat-select>

组件.ts：

this.userId.setValue(null);

上面的行假设我已经使用名为“userId”的 formControls 之一实例化了我的 formGroup，而“this.userId”是我的组件的一个属性，它引用了“this.userForm.get('userId')”。

因此，当我将“userId”的 formControl 值设置为 null 时，在 html 中没有选择任何内容。我的印象是您可以将“空”值作为 mat-select 的选项之一，我错了吗？如果没有，关于我可以做些什么来让它按照我想要的方式工作的任何建议。

谢谢！

我将 Angular 与 Material Design 组件一起使用。如何使用 CSS 在 textarea 输入字段周围添加边框？

来自https://material.angular.io/components/input/examples 的示例文本区域：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

默认的 textarea 是什么样的

在Angular Material2的官方主题文档中,它清楚地说明了以下内容:

在Angular Material中,通过组合多个调色板来创建主题.特别是,主题包括:

• 主要调色板:在所有屏幕和组件中使用最广泛的颜色.
• 重点调色板:用于浮动操作按钮和交互元素的颜色.
• 警告调色板:用于传达错误状态的颜色.
• 前景调色板:文本和图标的颜色.
• 背景调色板:用于元素背景的颜色.

但在每个例子中,他们只修改前三个:

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

@include angular-material-theme($candy-app-theme);

所以我的问题是:如何更改前景调色板以更改主调色板或辅助调色板的文本颜色？

有一些网站(materialpalette.com,material.io)显示了易于可视化的调色板,但他们仍未说明如何在Angular Material2中包含或修改该调色板.

如何使用角度材料2 FAB按钮打开浏览输入对话框？这可以通过这种方式在HTML中完成.

<button type="button">
    <label for="file-input">click</label>
</button>
<input type="file" id="file-input" style="display:none">

我尝试使用与材料2相同的方法,但它不起作用.

<button md-mini-fab type="button">
    <label for="fileToUpload">
        <md-icon>add</md-icon>
    </label>
</button>
<input id="fileToUpload" type="file" style="display:none;">

还有其他方法可行吗？谢谢.

我在角度世界中相当新,我试图在Angular Material 2中使用Angular 4中的新md-table组件.

我从一个API中提取了一个服务,该API检索简单的内容数组.现在我正在尝试将此服务用作md-table的数据源,但我找不到从服务获取数据的方法(它总是返回一个空数组).

请注意,在使用md-table之前,我正在使用该服务并且它正常工作.

以下是组件的代码:

import { Component, OnInit, ViewChild } from '@angular/core';
import {DataSource} from '@angular/cdk';
import {MdPaginator} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';

import { GroupService } from '../shared/group.service';
import { Group } from '../shared/group';

@Component({
  selector: 'app-group-list',
  templateUrl: './group-list.component.html',
  styleUrls: ['./group-list.component.css'],
  providers: [GroupService]
})
export class GroupListComponent implements OnInit{

  public DisplayedColumns = ['name', 'email', 'directMembersCount'];
  public groupDatabase = new GroupDatabase();
  public dataSource : CustomDataSource | …

我有材料2的角度4项目,我想过滤MatTable中的数据.当我们过滤未嵌套的字段上的数据时,DataSource过滤器工作正常.

this.dataSource = new MatTableDataSource([
     { orderNumber: 1, orderInfo: { type: 'ABC'}, date: '12/3/2012 9:42:39 AM'},
     { orderNumber: 3, orderInfo: { type: 'Hello' }, date: '12/2/2018 9:42:39 AM'},
]);

过滤器对orderNumber,日期工作正常,但在orderInfo对象中没有与type字段一起正常工作.