Angular Material Table：如何实现搜索前隐藏表格行？

问题根源 #

你的HTML结构不符合表格规范，<div>不能直接嵌套在<table>内部（表格仅允许<thead>、<tbody>、<tr>等表格专属元素作为直接子元素）。这种非法嵌套会导致Angular的变更检测无法正确感知DOM状态变化，即便displayResults已更新为false，数据行也无法被隐藏。

修正方案1：直接在数据行标签上使用*ngIf #

移除多余的<div>，将*ngIf直接绑定到<tr mat-row>标签上：

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

修正方案2：用<tbody>包裹数据行并控制显示 #

更符合表格规范的写法是用<tbody>统一包裹数据行，再在<tbody>上添加*ngIf控制：

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

逻辑验证 #

你的applyFilter方法逻辑无需修改（已确认displayResults能正确更新状态），修正DOM结构后，Angular的变更检测会正常触发，清空搜索时数据行会自动隐藏，提示区域也能恢复显示。

内容的提问来源于stack exchange，提问作者Yui