Question

因此，我在mat-table中使用 data-label 时遇到问题。我有一个表，其中有很多带有数据的列，并希望使其具有响应性。我在Google上进行了搜索，发现可以使用 data-label 属性。问题是（据我了解）数据标签不支持斜角{{code}}。

它仅是这样的（静态的仅数据）。如果我想要在大括号写的东西在控制台我有一个例外，“不能绑定到‘标签’，因为它不是‘垫芯’的已知属性。 1.如果“ mat-cell”是Angular组件，并且具有“ label”输入，则请验证它是否是此模块的一部分。 2.如果“ mat-cell”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。”

有人可以向我解释如何解决此问题，谢谢！

static data here working

<div class="example-header" fxLayout="row">
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>
<div class="example-container mat-elevation-z8">
  <mat-table [dataSource]="dataSource" matSort>
    <!-- ID Column -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
      <mat-cell *matCellDef="let row" data-label="id"> {{row.cnt}} </mat-cell>
    </ng-container>
    <!-- Progress Column -->
    <ng-container matColumnDef="progress">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Progress </mat-header-cell>
      <mat-cell *matCellDef="let row" data-label="progress"> {{row.progress}}% </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 row" data-label="name"> {{row.name}} </mat-cell>
    </ng-container>
    <!-- Color Column -->
    <ng-container matColumnDef="color">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Color </mat-header-cell>
      <mat-cell *matCellDef="let row" [style.color]="row.color" data-label="color"> {{row.color}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;">
    </mat-row>
  </mat-table>
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

Answer 1

它将解决您的问题：

<mat-cell *matCellDef="let row" [attr.data-label]="row"> {{element[row]}}</mat-cell>

如果我使用* ngFor和指令，该如何在mat-table中使用“数据标签”？

1 个答案: