我正在使用 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>