标签: angular-material-5

考虑下面的例子.是否可以使角度材料数据表具有内联编辑功能？或者使特定列下的单元格在加载时可编辑(请参阅下面的图像,其中可以编辑电子邮件列字段).如果是这样,你可以分享示例代码吗？

具有动态行的角度材料数据表

我试图在html中获取表格中的行索引,这是使用角度材料v5.2实现的.有没有方法可以获得索引？

参考代码:

<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">

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

    <!-- Name Column -->
    <ng-container matColumnDef="name">
     <button (click)="doSomething()"> Do something</button>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

方法doSomething是需要索引的.

任何帮助将不胜感激.

如何在mat-select angular中获取所选选项值的id 5.仅获取onchangeevent中所选选项的值.但是如何获得所选选项值的id.

 client.component.html
<mat-form-field>
    <mat-select placeholder="Client*" #clientValue  (change)="changeClient($event)">
    <mat-option  *ngFor="let client of clientDetails"   [value]="client.clientName">
      {{client.clientName |  json}}
    </mat-option>
  </mat-select>
</mat-form-field>

client.component.ts file
export class Client{
     changeClient(event){
     console.log(event);
 }
}

我试图得到一个mat-slide-toggle但不幸的当前值我会得到一个错误:

Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'mat-slide-toggle'.

我在我的组件的html部分中使用这样的切换:

 <mat-slide-toggle color="primary" [(ngModel)]="showInnerView">
      Default Slide Toggle
 </mat-slide-toggle>

我的组件中的相应属性:

showInnerView: boolean = false;

我做错了什么？

文件的mat-slide-toggle

官方例子的mat-slide-toggle一起[(ngModel)]

使用版本:Angular:5.2.4,Angular材料:5.2.0

我正在研究mat-button-toggle-group,我通过覆盖mat-button-toggle-checked类来修改现有的css,如下所示.现在,当我在按钮之间切换时,css不工作,直到我得到焦点,这是因为当点击的按钮处于焦点时,正在添加2个cdk类'cdk-focused'和'cdk-program-focused'.有没有什么方法可以让这些类禁用或使它们不适用或用相同的mat-button-toggle-checked css覆盖它们？

<mat-button-toggle-group #group="matButtonToggleGroup" value="line">
    <mat-button-toggle (click)="showLine()" value="line">Line</mat-button-toggle>
    <mat-button-toggle (click)="showChart()" value="chart">Chart</mat-button-toggle>
</mat-button-toggle-group>

和css

mat-button-toggle-group {
    border: solid 1px #d1d8de;
    width:260px;
    height:41px;
    text-align: center;
    .mat-button-toggle-checked{
      background-color: #ffffff;
      font-weight: bold;
    }
    .mat-button-toggle{
      width:50%;
      font-size: 15px;
    }
  }

我正在尝试向材质表添加不同的过滤器.更确切地说,我正在尝试重现类似于以下GIF的内容

为此,我在以下Github线程中关注irowbin的响应,但根据他的指导原则,我无法真正生成我想要的内容

在Stackblitz或Github上有任何工作示例,所以我可以在mattable中关注并创建多个搜索过滤器吗？

我注意到,在触发的对话框关闭后,该按钮会获得以cdk为重点的类和cdk-program-focused .如果我点击任何地方效果消失.

app.component.html [片段]

<mat-cell *matCellDef="let element">
  <span matTooltip="Delete" matTooltipPosition="right">
    <button mat-icon-button color="warn" (click)="openDeleteAssociationDialog()">
      <mat-icon>delete</mat-icon>
    </button>
  </span>
</mat-cell>

我正在按照 Angular Material github 上的指南设置自定义全局配置以在小吃店模块上使用。这是我遵循的指南。

然而，由于在文档最高审计机关，没有出口的MAT_SNACK_BAR_DEFAULT_OPTIONS唯一MAT_SNACK_BAR_DATA，但它不是重写默认配置。

这是我尝试过的：

import { MatSnackBarModule, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';

providers: [
    { provide: MAT_SNACK_BAR_DATA, useValue: { duration: 2500 } }
]

我也试过这样：

{ provide: MatSnackBarConfig, useValue: { duration: 2500 } }
{ provide: MatSnackBarConfig, useClass: SnackClass }

但没有一个选项有效。小吃在指定时间后永远不会自动关闭。

在Angular材料官方网站Angular Material Table中,提到filterPredicate:((data:T,filter:string)=> boolean)将根据特定字段过滤数据.但不知道如何开始.这有什么例子吗？

我有以下html代码

<mat-tab label="Regular" (selectChange)="tabClick()"
                 (click)="tabClick()">
   <h1>Some more tab content</h1>
</mat-tab>

这就是功能，

tabClick(){
    console.log('Tab clicked...');
}

但它似乎没有被称为，为什么？以上任何事件均未触发？