如何渲染没有标题行的 Angular 9 mat-table？答案

【问题标题】：How do you render an Angular 9 mat-table without a header row?如何渲染没有标题行的 Angular 9 mat-table？
【发布时间】：2021-07-07 18:07:41
【问题描述】：

我正在使用 Angular 9。如何为表格构建一个没有标题行 (th) 的 mat-table？听起来很傻，但如果我这样做

<table mat-table *ngIf="isMobile" #mobile_table [dataSource]="dataSource">
  <ng-container matColumnDef="item">
    <td mat-cell *matCellDef="let item_stat">
      <div class="smallHeading">
        {{ item_stat.max_date }} m
      </div>
      <div class="mainRow divider">
        <a href="{{ item_stat.mobile_path }}">{{ item_stat.title }}</a> ·
        {{ getScore(item_stat) }}
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="mobileDisplayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: mobileDisplayedColumns;" [ngClass]="getRowClass(row)"></tr>
</table>

它会产生错误

ERROR TypeError: Cannot read property 'template' of undefined
    at MatHeaderRowDef.extractCellTemplate (table.js:567)
    at table.js:2522
    at Function.from (<anonymous>)
    at MatTable._getCellTemplates (table.js:2512)
    at MatTable._renderRow (table.js:2467)
    at table.js:2326
    at Array.forEach (<anonymous>)
    at MatTable._forceRenderHeaderRows (table.js:2321)
    at MatTable.ngAfterContentChecked (table.js:1800)
    at callHook (core.js:4730)

我必须添加

<th mat-header-cell *matHeaderCellDef></th>

让表格正确呈现。这似乎没有必要，因为我不想要我的表格的标题行。如何构建我的 mat-table 以便不需要这样做？

【问题讨论】：

我不认为你可以，但你可以应用 display: none

标签： angular html-table angular9 mat-table

【解决方案1】：

您只需要删除标题行 mat-header-row *matHeaderRowDef="mobileDisplayedColumns"> 对我来说效果很好。

【讨论】：

【解决方案2】：

只需删除这一行：

<tr mat-header-row *matHeaderRowDef="mobileDisplayedColumns"></tr>

【讨论】：

【解决方案3】：

两种方式

删除<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

或者

在您的 css 组件上添加 :host ::ng-deep thead{display: none;}

【讨论】：