标签: angular-material2

看起来Material2没有任何类似于Material1的东西,opened="$mdMedia('gt-md')"它会根据屏幕宽度隐藏和显示sidenav.

https://github.com/angular/material2/issues/45

与此同时,在我的项目中实现此类功能时,最好的方法是什么.

Plunker

我正在尝试使用新的自动完成组件for material2 beta.2我可以让组件和选项菜单渲染得很好,但是一旦从列表中选择一个选项,我就无法弄清楚如何执行操作

<md-input-container dividerColor="accent" [mdTooltip]="hint" mdTooltipPosition="above">
     <input mdInput [formControl]="selectedInput" [mdAutocomplete]="auto" placeholder="text">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
     <md-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option }}</md-option>
</md-autocomplete>

我的最终目标是每次用户从列表中选择一个值时,可以填充一个名为selectedItems的变量,该变量位于我的组件中(可以多次选择).

我知道它与MdAutocompleteTrigger有关但我无法将这些碎片连接在一起.

我正在尝试将图标放在占位符中.我试过这段代码:

<md-input name="name">
   <md-placeholder>
      <i class="material-icons app-input-icon">face</i> Name
   </md-placeholder>
</md-input>

在重新安装角度材料并更新角度cli之前,它正在工作(显示带占位符的图标).对于此代码,浏览器现在提供此错误:"'md-input'不是已知元素".

然后我尝试了这段代码:

 <md-input-container>
    <input mdInput placeholder="Name" name="name2">
 </md-input-container>

它工作正常,但如何在其占位符中添加"face"图标？

从昨天开始,我正在努力解决角材料2 datepicker的问题,在此之前npm install 它正常工作,现在我得到:

ERROR Error: Datepicker: value not recognized as a date object by DateAdapter.
HolidayRequestComponent.html:21 

第21行是我<input开始的地方

<md-input-container [formGroup]="dateRangeForm">
  <input
   mdInput
   name="date_from"
   [mdDatepicker]="from"
   placeholder="Start date"
   formControlName="holidayDataControl"
   [ngModel]="date_from"
  >
<md-datepicker-toggle mdSuffix [for]="from"></md-datepicker-toggle>
</md-input-container>
<md-datepicker #from></md-datepicker>

我的组件:

import {Component, OnInit, Inject } from '@angular/core';
import {MD_DIALOG_DATA, MdDialog } from '@angular/material';
import {FormBuilder, FormControl, FormGroup, NgForm, Validators} from '@angular/forms';
import {Observable} from 'rxjs/Observable';


@Component({
  selector: 'app-holiday-request',
  templateUrl: './holiday-request.component.html',
  styleUrls: ['./holiday-request.component.css']
})

export class HolidayRequestComponent implements OnInit {

  public date_from …

我正在研究角度2素材应用程序,我有一个有多选元素的情况,并且我有一个带复选框的列表,所以我可以一次选择多个项目.我能够使用角度材质组件,但我想要的是默认情况下要检查的2-3个项目,如果我选择/取消选择特定项目,那么我应该选中/选择标记为true/false.

<md-select multiple="true" [(mgModel)]="test">
  <md-option *ngFor="let l of list" [value]="l">
    {{l.name}}
  </md-option>
</md-select>

var list = [{name:'abc'},{name:'cbv'},{name:'hgf'},{name:'rty'},{name:'fdv'},{name:'vbg'}]

var test = [{{name:'abc'},{name:'cbv'}]

是否有其他方法或在某些地方出错.

通常这不是问题，但是只有Material 2的Atm文档数量很少，因此我无法使所有图像具有相同的大小，但是可以通过更改窗口来正确调整大小

我当时创建的所有图像的大小都非常相似，但是在高度上要长一些，但是我的旧代码只是通过一些bootstrap调用进行了调整。

但是在垫层卡中使用图像时，图像的长度较长，因此看起来与此处显示的位置不符：

BAC计算器的图像比其余图像更长，因此看起来不适当，将其他图像推到不适当的位置，或者强制一个空单元格，这是我要求显示的图像：

<div *ngIf="data;else other_content">
    <div class="row">
      <div *ngFor="let project of data" class="col-md-6">
        <div>
          <mat-card class="mat-elevation-z4">
            <mat-card-header>
              <div mat-card-avatar class="example-header-image"></div>
              <mat-card-title>{{project.title}}</mat-card-title>
              <mat-card-subtitle>{{project.category}}</mat-card-subtitle>
              <div class="grow-empty"></div>
              <div *ngIf="project.source">
                <button mat-raised-button (click)="openSite(project.source)">SOURCE</button>
              </div>
            </mat-card-header>
            <img mat-card-image src="{{project.image}}" alt="{{project.title}}">
            <mat-card-content>
              <p>
                {{project.detail  | slice:0:250}}...
              </p>
            </mat-card-content>
            <mat-card-actions>
              <button mat-raised-button>Information</button>
            </mat-card-actions>
          </mat-card>
        </div>
        <br>
      </div>
    </div>
  </div>

如果我将高度设置为“ 300”之类的静态值，从技术上讲它可以解决问题，但重新缩放只会破坏它

我希望它是固定的比例，但是要拍摄任何图像并放大/缩小它以坐下，并使其适合卡本身的大小（例如Callum.Tech卡）

根据此处的文档https://material.angular.io/components/datepicker/overview，将语言环境代码设置为您希望通过放置

providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
]

但是然后我的应用程序无法编译，因为它告诉我找不到名称MAT_DATE_LOCALE。我是否在这里缺少某些东西，因为我必须自己定义？但是，我无法想到将其放置在什么位置，因为它们全部在模块类中。

我动态循环通过选项卡,我想添加一个(点击)事件,以便能够在我选择选项卡时加载不同的选项.

是不是可以举办活动(点击)活动？我尝试使用(selectChange)但是在创建标签时我无法从循环中获取bank.id.

是不是可以在动态创建的选项卡上添加简单的点击事件？

    <mat-tab-group>
  <mat-tab label="All transactions">
    <mat-list>
      <mat-list-item *ngFor="let bank of banks">
        <h4 mat-line>{{bank.fullName}}</h4>
      </mat-list-item>
    </mat-list>
  </mat-tab>
  <mat-tab *ngFor="let bank of banks" (click)="fetchAccounts(bank.id)" label="{{bank.fullName}}">

    <mat-list>

      <mat-list-item *ngFor="let account of accounts">
        <h4 mat-line>{{bank2.fullName}}</h4>
      </mat-list-item>
    </mat-list>
  </mat-tab>
  <!-- <mat-tab label="Test Bank" disabled>
    No content
  </mat-tab> -->

</mat-tab-group>

我使用Material Angular制作表格。添加了排序和分页。但是，当我想添加一个用于过滤的表单时，一切都会结束，最终没有任何效果。我做错了什么？该组件已添加到项目模块中。

在使用组件Mat-form-field之前和使用之后。

这是html和ts文件的示例：

HTML：

<div class="example-container mat-elevation-z8">

  <div class="example-header">
        <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
      </div>

  <mat-table #table [dataSource]="dataSource" matSort>

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef mat-sort-header> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column …

我们如何在mat-nav-list内正确添加辅助按钮？

这是我的示例：

<mat-nav-list>
  <h3 matSubheader>This is the listview</h3>
    <a mat-list-item [routerLink]="['/detail']">
        <span matLine>Title</span>
        <button mat-icon-button (click)="onAdd()">
        <mat-icon>add</mat-icon>
    </button>
        <button mat-icon-button (click)="onRemove()">
        <mat-icon>delete</mat-icon>
    </button>
    </a>
</mat-nav-list>

在这段代码中，我希望onAdd()or onRemove()可以单独执行，但是页面随后会导航。

工作演示