标签: angular-material2

我有一个基于角度材料的ui.我正在使用@material/flex-layout和材料卡,所以我有一个组件布局,如:

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div fxFlex="30%">
        <md-card>
            <h3>Last 30 Days</h3>
            <app-oee30 [target]="target" [cell]="cell"></app-oee30>
        </md-card>
    </div>
    <div fxFlex="70%">
        <md-card>
            <h3>24 hours of OEE (target: {{target}}%):</h3>
            <app-oee24 [target]="target" [cell]="cell"></app-oee24>
        </md-card>
    </div>
</div>

看起来像这样:

显然,两个箱子高度不同的事实看起来很奇怪.我怎样才能轻松(和响应),确保它们的高度相同？谢谢

我有一个角度扩展面板,如下所示.

但我想将箭头的设计改为这样的:

没有扩大:

扩展:

怎么样？或者我可以用棱角分明的材料吗？代码如下:

HTML:

<md-expansion-panel>
  <md-expansion-panel-header>
    <md-panel-title>
      Personal data
    </md-panel-title>
    <md-panel-description>
      Type your name and age
    </md-panel-description>
  </md-expansion-panel-header>

  <md-form-field>
    <input mdInput placeholder="First name">
  </md-form-field>

  <md-form-field>
    <input mdInput placeholder="Age">
  </md-form-field>
</md-expansion-panel>

TS:

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

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}

包括提供者:Constructur中的MatDialog

      constructor(groupService: GroupService, public dialog: MatDialog) 

我在运行时遇到以下错误

     Error: No provider for InjectionToken mat-dialog-scroll-strategy!

我已将Matdialog包含在"app.module.ts"中我是否需要一个不同的提供商以及哪一个？我使用角度材料2.0.0b12

谢谢

如何使mat-card材料2组件内的内容滚动？我没有在材料2网站上找到任何东西

将项目中的角度材质更新到最新版本的最佳方法是什么material@2.0.0-alpha.8-3？

我试过了:

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

我已经实现了自动完成功能,没有错误,一切似乎都没问题,但绝对没有任何反应.我在输入字段中输入了一些内容,似乎没有任何操作,控制台中没有显示任何内容.

HTML

  <form>
    <mat-form-field>
      <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
    </mat-form-field>

    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let n of testValues" [value]="n">
        {{n}}
      </mat-option>
    </mat-autocomplete>
  </form>

TS

import { MatAutocomplete } from '@angular/material/autocomplete';
import { FormControl } from '@angular/forms';
...
public testValues = ['one', 'two', 'three', 'four'];
public myControl: FormControl;
...
constructor() {
    this.myControl = new FormControl();
}

编辑:我已经导入了

import {MatAutocompleteModule} from '@angular/material/autocomplete';

在我的app模块中.

材料版本 -

"@angular/material": "^5.0.0-rc.2",

我正在尝试使用mat-menu构建一个上下文菜单,我觉得我非常接近.我希望菜单弹出用户右键单击的位置.问题是它会弹出用户最后右键单击的位置,而不是它们当前右键单击的位置.我该如何解决？

HTML:

<span #contextMenuTrigger [matMenuTriggerFor]="contextMenu" class="context-menu-trigger" [style.left.px]="menuLeft" [style.top.px]="menuTop"></span>
<div (contextmenu)="openContextMenu($event)> stuff that I want right-click available to goes here</div>
<mat-menu #contextMenu="matMenu"> 
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
</mat-menu>

CSS:

.context-menu-trigger { position: absolute }

TS:

...
@Component( ... )
export class AppComponent {
    @ViewChild(MatMenuTrigger) public menuTrigger : MatMenuTrigger;
    public menuLeft = 0;
    public menuTop = 0;
    ...
    openContextMenu(event) {
        event.preventDefault();
        this.menuLeft = event.x;
        this.menuTop = event.y;
        this.menuTrigger.openMenu();
    }
}

我们目前在@angular 4.4和@ angular/material 2.0.0-beta.12.

我们正在开发一个企业组件库,它应该提供Material Designed Angular Components.所以这个库的用户不应该直接使用例如Angular Material,而是包括一些像" custom-tabs " 这样的组件.

使用MatTabModule的组件直接像魅力一样工作,而在使用我们的自定义组件时,投影内容不会显示.

用法看起来与Angular Material API非常相似:

<custom-tabs>
  <custom-tab [label]="labelA">Content A</custom-tab>
  <custom-tab [label]="labelB">Content B</custom-tab>
  <custom-tab [label]="labelC">Content C</custom-tab>
</custom-tabs>

自定义组件尝试按如下方式投影内容:

<!-- custom-tabs template -->
<mat-tab-group>
  <ng-content></ng-content>
</mat-tab-group>

<!-- custom-tab template -->
<mat-tab [label]="label">
  <ng-content></ng-content>
</mat-tab>

有谁知道我们如何让它运作？

我提供了一个StackBlitz,您可以在其中查看问题.

正如您可能从角度材料文档中了解到的那样,mat-expansion-panel将@Output命名为"opened",这是在打开手风琴项目时发出的.我想抓住那个打开的事件并确定哪个面板被打开了.但是这个简单的代码(下面)总是只返回undefined.我做错了什么？此输出是仅发出未定义还是我错过了什么？材料文档没有说明这种情况.

component.html

<mat-accordion multi>
  <mat-expansion-panel (opened)="openGroup($event)" *ngFor="let element of Data">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <ul class="nav-tabs">
          <li class="col-xs-3">{{element.param1}}</li>
          <li class="col-xs-5">{{element.param2}}</li>
          <li class="col-xs-3">{{element.param3}}</li>
        </ul>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <div>
      <p>{{element.content}}</p>
    </div>
  </mat-expansion-panel>
</mat-accordion>

component.ts

Data = [
  // This returns from backend, this is only for show that the Data is not empty
  { /* some data here*/ },
  { /* some data here*/ },
  { /* some data here*/ }
];

openGroup(e) {
  console.log(e);
}

我想使用mat-card指令来展示我的产品.角度材料文档在我看来并不彻底.我在Internet上找到了许多使用Table with dataSource的示例(示例1,示例2)

现在我获得所有产品的productList并使用ngFor进行迭代.我在页面上显示所有产品.如何将productList提供给paginator并使用已处理的数据(paginationList)进行迭代.

*component.html文件显示所有产品:

<mat-paginator #paginator 
  [length]="productList.length" 
  [pageSize]="5" 
  [pageSizeOptions]="[5, 10, 25, 100]" 
  [showFirstLastButtons]="true"
</mat-paginator>

<ng-container *ngIf="productList.length; else notHeaveProducts">
  <mat-card class="product-card" *ngFor="let product of productList">
    <mat-card-header>
      <mat-card-title>
        <h3>{{ product.title }}</h3>
      </mat-card-title>
    </mat-card-header>
    <img mat-card-image [src]="product.img_url" [alt]="product.title" [title]="product.title">
    <mat-card-content>
      <p>{{ product.description }}</p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button color="accent" (click)="addItemToCard(product)">Add to card</button>
    </mat-card-actions>
  </mat-card>
</ng-container>

*component.ts

export class ListComponent implements OnInit, OnDestroy {
  public productList: …