我正在使用 Grid List of angular material 2。

这是 plunker https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview

在这里，我定义了一个包含三列的网格列表，并且有三个图块（按定义为三列显示在一行中）。

我想改变拼贴的布局方向，比如如果屏幕尺寸在某个点缩小，那么所有拼贴都应该在另一列下方的第一列中，cols参数值以某种方式更改为 1。这怎么可能？flex-layout 可以吗？

我遇到了 md-card 组件的问题

        <md-card>
            <img height="200" width="200" md-card-image src="/resources/{{odd?.image?.path}}" />
            <md-card-content>
                <button md-button>{{odd?.object?.name}}</button>
            </md-card-content>
        </md-card>

我有这个代码，它创建了一张卡片，里面有一个图像，图像下面有一些文字。我希望图像的大小为 200x200 并且我希望卡片完全包裹图像，但相反的情况发生了，卡片填满了页面的整个宽度，因此，图像拉伸到卡片的大小

如果我从 img 标签中删除 md-card-image 属性，它会以 200x200 显示图像，但 md-card 仍然被拉伸。

我怎样才能保持我想要的图像大小并使 md-card 环绕它？

该站点声明，我可以使用 CSS 更改侧导航的宽度，如下所示：

md-sidenav {
   width: 200px;
}

这惹人我以下问题：我可以申请像标准的CSS属性width，position等等...定制组件，而不在我的组件来定义呢？

例子：

my-component {
    width: 500px;
}

我试过了，它不起作用。所以我认为，答案是否定的，对吗？

为了了解它们如何设置widthCSS，我阅读了github上的源代码。但我想不通他们是怎么做到的。该组件没有width属性。那么，它们是如何width通过 CSS 实现的呢？

编辑：

为了澄清这个问题，我会给你下面的例子：

我已经编写了以下组件：

test.component.html：

<p>test works!</p>

test.component.css：

p {
   border: 2px solid red;
}

test.component.ts:

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

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

  constructor() { }

  ngOnInit() { }

}

这是我的应用程序根，由 angular 引导：

app.component.html： …

I'm using angular material 2 inside my angular application. I'm experiencing a problem when my form input field error messages are more than one line. Here is the photo:

Here is the code:

<md-error *ngIf="password.touched && password.invalid">
          <span *ngIf="password.errors.required">
                {{'PASSWORD_RECOVERY.FIELD_REQUIRED' | translate}}
          </span>
          <span *ngIf="password.errors.minlength || password.errors.maxlength">
                {{'PASSWORD_RECOVERY.PASSWORD_LENGTH' | translate}}
          </span>
          <span *ngIf="password.errors.pattern">
                {{'PASSWORD_RECOVERY.FOR_A_SECURE_PASSWORD' | translate}}
          </span>
</md-error>

I've understood by reading github, that it is a bug in angular 2 material. Did anybody manage to solve this issue by …

我想使用角度材料步进器，但在进行第二步之前我需要进行一些异步服务调用。我怎样才能做到这一点？我可以向下一个按钮添加一个点击处理程序，但这不会等待异步调用返回并继续进行。这是一个plnkr。

在 html 模板中，我会有按钮：

  <button mat-button matStepperNext (click)="onNext()">Next</button>

在组件中：

  onNext() {
     let promise = service.validateData()
  }

有没有办法使用已完成的步骤属性？

回到 materialc1，我能够在我的材质菜单中呈现一个按钮列表，如下所示：

  <md-menu>
  <md-button ng-click="vm.openMenu($mdMenu, $event)">     
     <md-icon md-svg-icon="extraIcons:toolbox" aria-label="Toolbox"></md-icon>
  </md-button>
  <md-menu-content>
    <md-menu-item ng-repeat="hi in vm.ListofPizza">          
     <md-button ng-click="vm.orderPizza(hi.id)">                        
         {{hi.name}}          
    </md-button>            
  </md-menu-item>
 </md-menu-content>

我试图在 material2/angular2 中做同样的事情，如下所示：

<button mat-fab color="primary" [matMenuTriggerFor]="menu">
<mat-icon svgIcon="extraIcons:toolbox">
</mat-icon>   
</button>
<mat-menu #menu="matMenu">
<mat-menu-item *ngFor="let hi ofListofPizza">                 
<button mat-button> {{hi.name}}</button>
</mat-menu-item>

然而，这给了我下面提到的错误：

一个元素上不能有多个模板绑定。仅使用一个名为“模板”或以 * ("

菜单=“垫菜单”>

我究竟做错了什么？

我正面临用于 angular2 的日期选择器的问题。我尝试了https://material.angular.io/components/datepicker/examples 中的代码。此站点中显示的输出是我所需要的，但相反，我在页脚之后显示在页面底部的日历。示例中没有给出 CSS 更改。

我正在使用以下代码。

HTML：

<mat-form-field>
 <input matInput [matDatepicker]="picker" placeholder="Choose a date">
 <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
 <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

TS：

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

@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {}

屏幕截图： 我需要的输出（来自示例）

我得到的输出

我有一个 Angular Material Data Table，我正在尝试为它添加分页。

我遇到过这个问题，如果数据是异步源，那么 Mat-Paginator 就不起作用。

我尝试使用同步源，分页按预期工作，但由于我有一个可观察的，当数据最终到达时分页不会被初始化。

但是，我已尝试搜索此问题，但到目前为止似乎没有人遇到此问题，因此可能与我的设置有关。

以下是我的组件的 ts 文件。

import { Component, Input, Output, EventEmitter, style, Inject, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { Country} from '../../core/models/country';
import { OnChanges, AfterViewInit } from '@angular/core';
import { MatTableDataSource, MatPaginator } from '@angular/material';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-country-list',
    templateUrl: './country-preview-list.html',
    styleUrls : ['./country-preview-list.css']
})
export class CountryListComponent implements OnChanges, AfterViewInit {
    @Input() public countries: Country[];
    displayedColumns …

按照这个带有 label 的示例表单字段，我尝试更改mat-form-field占位符的行为。共有三个选项： auto、always和never。

该功能确实是一个很好的功能，可以根据开发人员想要实现的占位符类型来使用。

实际上，它可以在全局范围内使用，直接将其传递给@NgModule应用程序根目录：

@NgModule({
  providers: [
    {provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'}}
  ]
})

并按如下方式构建视图：

<mat-form-field [floatLabel]="never"> // never, auto or always
   <input matInput placeholder="Simple placeholder" required>
</mat-form-field>

我的问题是我首先没有找到/知道我确切可以/应该导入的位置：MAT_LABEL_GLOBAL_OPTIONS因为它似乎不存在@angular/material，如果我检查这个GitHub-Repo，我看到它是从 导入的@angular/material/core，但它没有对我不起作用，因为我收到以下错误：

/node_modules/@angular/material/core"' has no exported member 'MAT_LABEL_GLOBAL_OPTIONS'. Did you mean 'MAT_RIPPLE_GLOBAL_OPTIONS'?

它与我使用的材料和 CLI 版本有关吗？

Angular CLI: 1.5.0
Node: 8.0.0
OS: darwin x64
Angular: 5.0.3
... animations, common, compiler, …

该文件内容如下：

对话框打开后，对话框将自动聚焦第一个可选项卡元素。

您可以使用 tabindex 属性控制哪些元素是制表位。

我在文档或配置选项中看不到任何允许您完全禁用此功能而无需在每个可选项卡元素上使用额外标记的内容。这似乎有点不必要和凌乱。

例如 <p>Contact us on <a href="mailto:email@email.com" tabindex="-1">email@email.com</a></p>

是否有我缺少的配置选项？如果没有，我愿意接受有关如何最好地解决此问题的任何指导。