如何在没有表头行的情况下呈现Angular 9的mat-table？

Question

我正在使用 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，以便不需要这样做？

要让表格正确呈现而不需要标题行，可以使用mat-table的matHeaderRowDef指令，并将它设置为空数组。

例如：

<mat-table [dataSource]="myDataSource">
   <!-- No header row -->
   <ng-container matColumnDef="column1">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.column1}}</mat-cell>
   </ng-container>
</mat-table>

- satish

---

我不认为你可以这样做，但是你可以将display: none应用于它。 - Antonio Esposito

Answer 1

你只需要删除头部行 mat-header-row。

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

对我来说，它运行得很好。

- Hung Hoang

Answer 2

只需删除此行：

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

- Yasin Uyar

Answer 3

.mat-header-row {
  display: none;
}

- Demon

Answer 4

两种方法

方式一：删除<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

方式二：在CSS组件中添加:host ::ng-deep thead{display: none;}

- Eyayu Tefera