我在Angular Material中有输入元素:

<md-input-container>
<input type="text" mdInput placeholder="">
</md-input-container>

当输入具有焦点时,它显示下划线.如何隐藏或删除？

我似乎需要设置null的underlineRef？

我只是尝试将角度材料2日期选择器默认日期格式MM/DD/YYYY更改为DD/MM/YYYY或DD.MM.YYYY或至少DD-MM-YYYY

根据这个问题并在文档中提到

providers: [{provide: MD_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS}]

所以尝试了以下方法

方法1 plunkr:进入DD-MM-YYYY格式

方法2 plunkr:获取DD.MM.YYYY格式

方法3 plunkr:获得DD/MM/YYYY格式

但是上面的每个方法都工作正常,直到我选择日期 1到12,

例如:今天日期是2017年9月25日,如果我选择2017年9月12日作为日期,那么再次点击datepicker按钮我可以看到日历日期,截至2017年11月9日(09/11/2017)而不是(11/09)/2017),这似乎是默认日期格式没有正确覆盖

我对Web开发很陌生,我无法弄清楚如何解决以下问题,尽管它可能很容易.

我正在使用Angular 4和Angular Material来实现这样的工具提示:

<div mdTooltip="tooltip text" mdTooltipPosition="above">
  <span>Show tooltip</span>
</div>

我想使工具提示文本的字体大小更大.但是,我没有设法在Angular Material文档中找到如何执行此操作,也没有在Web中搜索.有没有人知道如何做到这一点？谢谢.

我是Angular2/4和angular typescript的新手.我想设置角度材料设计小吃吧的样式 ,例如将背景颜色从黑色和字体颜色更改为其他颜色.
我该如何设计"小吃店"？

我在服务/核心中有材料设计零食栏,并且可以根据需要在每个组件中调用它.

如何在Angular 2/4中设置Angular 2材质设计"snackbar"？我在下面列出了代码段:

服务/核心

import { Injectable, Inject } from '@angular/core';
import { Observable } from 'rxjs/Observable'
import { DOCUMENT } from'@angular/platform-browser'; 
import { MdDialog, MdDialogRef } from '@angular/material'; 
import { MdDialogConfig, ComponentType } from '@angular/material'; 
import {MdSnackBar} from '@angular/material';

constructor(
    public dialog: MdDialog,
    public snackBar: MdSnackBar,
    @Inject(DOCUMENT) public doc: any   ) {
      dialog.afterOpen.subscribe((ref: MdDialogRef<any>) => {
        if (!doc.body.classList.contains('no-scroll')) {
        doc.body.classList.add('no-scroll');
        }
      });
      dialog.afterAllClosed.subscribe(() => {
        doc.body.classList.remove('no-scroll');
      });        }

   openSnackBar(message: string, action?: string) { …

我正在使用Angular Material,我正在使用md-dialog为我的画廊添加弹出窗口.默认动画和样式看起来不错.但是,我想改变尺寸的宽度和高度md-dialog-container？这是隐藏的.仅在我单击模态时添加,当您打开chrome dev工具时,您可以看到md-dialog-container显示的内容.包括如何覆盖其余样式.

非常感谢一些帮助.谢谢.

我是Angular 4的新手,并开始使用材料组件,我从官方文档中复制了几个示例,但没有得到与文档相同的结果:

如何更改文本框宽度？我试过style ="width:200px;" 风格= "宽度:100%"; class ="col-md-x"但是没有一个工作,第二件事是如何将登录容器置于页面中间？我在这里找到了一些答案但是它们似乎都没有起作用,这是我的代码:

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
        <md-card>
          <md-card-title>Login</md-card-title>
          <md-card-content>
            <form class="example-form">
              <div>
              <md-form-field class="example-full-width">
                  <input mdInput placeholder="Username" type="text">
              </md-form-field>
              </div>
              <div>
              <md-form-field class="example-full-width">
                <input mdInput placeholder="Password" type="password">
              </md-form-field>
              </div>
            </form>
          </md-card-content>
        </md-card>
      </div>
    </div>  
</div>

**

我是材料2的新手,我已经实现了mat表,我在行中点击事件打开对话框,在最后一栏"Action"中还有一个菜单按钮,但点击按钮它也打开对话框而不是打开菜单.

表

    <mat-table #table [dataSource]="dataSource" matSort  (matSortChange)="sortData($event)">
    <ng-container matColumnDef="id">
          <mat-header-cell *matHeaderCellDef > No. </mat-header-cell>
          <mat-cell *matCellDef="let element"> 
              <mat-checkbox checked='true'></mat-checkbox>
          </mat-cell>
    </ng-container>
    <ng-container matColumnDef="unit_num">
        <mat-header-cell *matHeaderCellDef  mat-sort-header="unit_num"> Unit No. </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.unit_num}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="unit_type">
        <mat-header-cell *matHeaderCellDef mat-sort-header="unit_type"> Unit Type </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.unit_type}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="shares">
        <mat-header-cell *matHeaderCellDef mat-sort-header="shares"> Shares </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.shares}} </mat-cell>
      </ng-container>
    <ng-container matColumnDef="sections">
        <mat-header-cell *matHeaderCellDef>Section </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.sections.section_type}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="buildings">
        <mat-header-cell *matHeaderCellDef >Building …

如何在角度分量与相同的步进步骤之间切换mat-vertical-stepper和mat-h​​orizo​​ntal-stepper？

我正在使用Angular Material将日期选择器添加到我的应用程序中。由于某种原因，角材料没有应用原始的角材料样式。

它如何在我的应用程序中显示：

它应该如何显示：

我做了什么：

npm install --save @angular/material @angular/cdk

npm install --save @angular/animations

// Added this to the Angular Module whose components require the date picker
import {MatNativeDateModule, MatDatepickerModule} from "@angular/material";

//Added this in the root style.css file for the entire app
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

我不确定我做错了什么。

更新：

模块代码：

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from "@angular/router";
import {ProposalListComponent} from './components/proposal-list.component';
import {ProposalDetailComponent} from './components/proposal-detail.component';
import {ProposalEditComponent} from './components/proposal-edit.component';
import {ReactiveFormsModule} from "@angular/forms"; …

我有一个表显示这么多行,我想优化它的性能.我通过使用虚拟滚动技术找到了解决方案.下面是一个Angular Material CDK Vritual Scroll视口组件的示例,div我发现它很简单:

<cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5">
  <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item">
     <div class="state">{{state.name}}</div>
     <div class="capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

但是,我想将它与Angular Material Table集成,如下所示

<table mat-table [dataSource]="dataSource">
    <ng-container  *ngFor="let c of displayedColumns" [matColumnDef]="c">
      <th mat-header-cell *matHeaderCellDef>{{getTitle(c)}}</th>
      <td mat-cell style="white-space: pre-wrap;" *matCellDef="let element"> {{element[c]}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

我不知道如何来包装cdk-virtual-scroll-viewport到mat-table.我的表最多显示1000行和20多列,并且在加载和滚动时性能非常慢.

PS:我知道它可以通过使用Paginator解决,但我不想那样做.

版本

1. "@angular/material": "^6.2.0"
2. @angular/cdk": "^6.2.0"
3. @angular/cdk-experimental": "^6.2.1"
4. "@angular/core": "6.0.3"
5. "@angular/cli": …