Question

我在此示例中使用Angular项目中的材质： https://material.angular.io/components/table/examples

我有数据集的表： displayedColumns = ['userId', 'userName', 'progress', 'color']; 对于渲染我正在使用代码：

<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field floatPlaceholder="never">
      <input matInput #filter placeholder="Filter users">
    </mat-form-field>
  </div>

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

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- ID Column -->
    <ng-container matColumnDef="userId">
      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container matColumnDef="progress">
      <mat-header-cell *matHeaderCellDef> Progress </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.progress}}% </mat-cell>
    </ng-container>

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

    <!-- Color Column -->
    <ng-container matColumnDef="color">
      <mat-header-cell *matHeaderCellDef> Color </mat-header-cell>
      <mat-cell *matCellDef="let row" [style.color]="row.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>
</div>

我不想渲染ID列，但是我想要数组中的id变量。

如何禁用id列的渲染？当我删除代码时：

<ng-container matColumnDef="userId">
      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
    </ng-container>

我收到错误：

ERROR Error: cdk-table: Could not find column with id "userId".

Answer 1

那是因为你没有删除＆＃34; userId＆＃34;从显示的列列表中，在您的模板中

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

这里显示的值的值是在组件中初始化的（相应的* .ts文件）。可能看起来像

displayedColumns = ['userId', 'userName', 'progress', 'color'];

只需删除＆＃39; userId＆＃39;从上面的列表中它将起作用。

如何使用Angular材质渲染没有id的表

1 个答案: