Angular中用ngIf实现表格无数据提示的问题求助

你的代码存在几个关键问题导致功能失效，具体如下：

• 错误的*ngFor位置：把*ngFor放在<tbody>上会为每个数据项生成一个独立的tbody，不符合表格结构规范，应该将循环绑定到数据行<tr>上。
• 无效的DOM结构：<div>不能直接作为<tbody>的子元素，表格的tbody仅允许<tr>作为子节点，这会导致Angular模板解析异常。
• 模板引用变量使用错误：else分支的模板引用#noDetails需要定义在<ng-template>中，而非直接绑定到<tr>上；同时提示文本需要跨所有列，否则仅占第一列，显示效果异常。
• 变量名不匹配：循环变量是productDetail，但绑定数据时用了tradeDetail，会导致无法正确读取数据。

修正后的完整代码 #

<table id="productTable">
  <thead>
    <tr class="header-group">
      <th>Product number</th>
      <th>Product ID</th>
      <th>USERNAME</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据行循环 -->
    <tr *ngFor="let productDetail of productDetailResponse">
      <td>{{ productDetail.productNo }}</td>
      <td>{{ productDetail.productId }}</td>
      <td>{{ productDetail.userName }}</td>
    </tr>
    <!-- 空数据提示，数组为空时显示 -->
    <tr *ngIf="!productDetailResponse || productDetailResponse.length === 0">
      <td colspan="3">Table has no data</td>
    </tr>
  </tbody>
</table>

关键说明 #

• 确保productDetailResponse初始化为空数组（[]），避免未定义导致的length读取错误。
• 使用colspan="3"让提示文本横跨所有列，保证表格布局整齐。

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