标签: angular-material-6

我有以下具有数据源属性的角度材质表：

<div class="dim">
  <mat-form-field >
    <input matInput class="warn" (keyup)="applyFilter($event.target.value)" placeholder="Search">
    <mat-icon matSuffix>search</mat-icon>
  </mat-form-field>
</div>
<div class="mat-elevation-z2">
  <table mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="unit_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.id}}</td>
    </ng-container>

    <ng-container matColumnDef="unit_type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
      <td mat-header *matCellDef="let row">{{row.unit_type}}</td>
    </ng-container>

    <ng-container matColumnDef="location_id_auto">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>
      <td mat-header *matCellDef="let row">{{row.location}}</td>
    </ng-container>

    <ng-container matColumnDef="user_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>User</th>
      <td mat-header *matCellDef="let row">{{row.user}}</td>
    </ng-container>

    <ng-container matColumnDef="unit_number_hh">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Number Of units</th>
      <td mat-header *matCellDef="let row">{{row.unit_number}}</td>
    </ng-container>

    <ng-container matColumnDef="unit_status"> …

我在 angular6 应用程序中使用角材料。

        <mat-form-field fxFlex>
            <mat-label [class.form-label]="fg.get('email').valid && fg.get('email').touched">{{attributesLabels.email}}</mat-label>
            <input matInput formControlName="email" required [autofocus]="true">
            <mat-error *ngIf="fg.get('email').hasError('required')">Email is required</mat-error>
            <mat-error *ngIf="fg.get('email').hasError('email') && !fg.get('email').hasError('required') ">Invalid email</mat-error>
        </mat-form-field>

这是必填字段，在此输入字段的占位符中，“*”附加在占位符之后，如下所示：

我想将占位符中“*”的颜色更改为红色。我怎样才能改变颜色？

Html 由上面的 mat-form-field 生成：

我是角度6的新手，这里有一个带有mat-sidenav的mat-toolbar。一切工作正常，但我想在侧面nav菜单中为活动项设置颜色。

目前我有黑色背景，我想在mat-nav-list中选择项目时设置颜色，并且尝试在每个也不起作用的项目之间设置mat-divider。

app.component.html

<mat-sidenav-container class="sidenav-container">

  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)" style="background:black"> //current background is black
    <mat-toolbar class="menuBar">Menus</mat-toolbar>
    <mat-nav-list>
      <a class="menuTextColor" mat-list-item href="#">Link 1</a> // want to change the color of the selected item.
      <a class="menuTextColor" mat-list-item href="#">Link 2</a> // want to set divider between each item
      <a class="menuTextColor" mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-toolbar class="toolbar">
      <button class="menuTextColor" type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ …

我有一个登录对话框，并希望在按下 Enter 时防止它自动关闭。

更具体地说，当用户输入凭据并按下 Enter 并且凭据响应作为错误返回时，我希望对话框保持不变（因此我可以向他们显示一些错误消息并让用户再次尝试）。

所以这就是我所做的：

export class LoginComponent {
    constructor(public dialogRef: MatDialogRef<LoginComponent>) { }

    onSubmit(): void {  
        this.authService.login(...)
            .subscribe(res => { 
                ... 
             },
            error => {
                this.dialogRef.disableClose = true;
            }
    }
}

this.dialogRef.disableClose = true; 即使响应作为错误返回，仍然关闭对话框。

我该怎么做？

编辑

登录.component.ts

<mat-toolbar>
    <span>Login</span>
</mat-toolbar>
<mat-card class="my-card">
    <div *ngIf="error" style="color: red;">{{error}}</div><br />
    <form (ngSubmit)="onSubmit()" [formGroup]="loginForm">     
        <mat-card-content>       
            <mat-form-field appearance="outline" class="full-width">
                <mat-label>Email</mat-label>
                <input matInput placeholder="Email" 
                   formControlName="email" 
                   [formControl]="emailFormControl" 
                   [errorStateMatcher]="matcher" />
                <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
                    Enter valid email address
                </mat-error>   
                <mat-error *ngIf="emailFormControl.hasError('required')">
                    Required field
                </mat-error> …

我正在开发一个在数据表中使用垫子芯片的角度应用程序。但是，表中的数据存储在数据库中并通过 HTTP 调用进行检索。所以当我点击删除按钮时，涟漪会一直延伸到表格刷新并且它可以变得非常大。

有没有办法修改垫子芯片或其他角材料元素的波纹半径？我知道我可以禁用它，但修改半径是最好的。

使用 Angular 2 和 Angular Material 6.4.7

我需要使用 mat-select 组件设置默认选择的选项。

以下代码按原样工作，并在我不使用 [formControl] 绑定时设置默认值。

下面的例子：

<mat-form-field>
    <mat-select [(value)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" >
        <mat-option *ngFor="let y of yearsArr;" [value]="y">{{ y }}</mat-option>
    </mat-select>
</mat-form-field>

当前年份 (currentYear) 是一个变量，用于设置当前年份的值。

但是，当我使用表单控件绑定时，它无法在 mat-select 组件上设置默认选项。

下面的例子：

<mat-form-field>
    <mat-select [(value)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" >
        <mat-option *ngFor="let y of yearsArr;" [value]="y">{{ y }}</mat-option>
    </mat-select>
</mat-form-field>

我搜索了堆栈溢出并遇到了这个可行的解决方案，但是我在浏览器控制台中收到警告，我不确定这是否是实现此目的的正确方法。

下面的例子：

<mat-form-field>
    <mat-select [(ngModel)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" >
        <mat-option *ngFor="let y of yearsArr;" [value]="y">{{ y }}</mat-option>
    </mat-select>
</mat-form-field>

我得到的警告如下：

看起来您在与 formControl …

我想在mat-step中为不同的表单设置不同的宽度。第一个表单的内容宽度为400px，第二个表单内容的宽度为700px。

<mat-horizontal-stepper labelPosition="bottom" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
       <div style="width:400px">
 <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>

       </div>

      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <div style="width:700px">
         <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      </div>


      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

但它不起作用，任何人都可以帮助我如何实现这一目标。

我正在使用 Angular 6 材料设计垫日历。我指的是下面的例子。 https://stackblitz.com/edit/angular-mat-calendar?file=src%2Fapp%2Fapp.component.html

但是在 mat-calendar 中如何设置最小和最大比例。

 <mat-calendar [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>

我正在尝试像这样添加，但它不起作用。

<mat-calendar [selected]="selectedDate" (selectedChange)="onSelect($event)" [min]="mindate" [max]="maxdate"></mat-calendar>

但这会引发错误“无法绑定到 'min'，因为它不是 'mat-calendar' 的已知属性。”

任何人都可以帮助我。

这是我的app.module，我尝试在material.angular.io中完成整个说明

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrandComponent } from './brand/brand.component';
import { AlertModule } from 'ngx-bootstrap';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import 'hammerjs';



@NgModule({
  declarations: [
    AppComponent,
    BrandComponent,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule
  ],
  imports: [
    BrowserModule,
    AlertModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我应该怎么处理这个错误

我正在尝试角材料数据表。

正如我们所知，默认情况下每行都会发生过滤。

如果我想过滤特定列，那我该怎么办？

我是否应该编写获取所有记录的方法，然后对其进行迭代并比较特定列？

组件.ts

ngOnInit() {
    this.service.getUser().subscribe( results => {
        if(!results){

          return;
        }
        console.log(results);
        this.dataSource = new MatTableDataSource(results);
        this.dataSource.sort = this.sort;
    })


onSearchClear(){
    this.searchKey="";
    this.applyFilter();
  }

  applyFilter(){
    this.dataSource.filter = this.searchKey.trim().toLowerCase();
  }

组件.html

<mat-form-field class="search-form-field">
      <input matInput [(ngModel)]="searchKey" placeholder="search by userName" (keyup)="applyFilter()">
    </mat-form-field>