Angular新@for语法嵌套@if失效问题及解决方案咨询

想要结合Angular新的@for语法与@empty指令，实现有数据时显示完整表格、无数据时展示提示文本的效果。

此前使用*ngFor时，通常会先检查数据数组长度，不为空时执行以下操作：

• 添加表格表头
• 使用*ngFor遍历数据生成表格行
• 添加表格表尾

尝试用新语法把这三步整合到@for中，写法如下：

@for(order of licenseOverview.orders; track order.id; let firstRow = $first; let lastRow = $last) {
   @if(firstRow) {
       <table ...
   }

   <tr>
       <td>{{ order.reference }}</td>
       <td>{{ ... }}</td>
   </tr>

   @if(lastRow) {
       ... </table>
   }
}
@empty { <p>No data for you!</p> }

但Angular无法编译这段代码，报错信息如下：

@if(firstRow) {
                <table class="table table-responsive ds-table">
                    <thead>
                        <tr>
                            <th>{{ 'Order' }}</th>
                            <th>{{ 'Expected On' }}</th>
                            <th>{{ 'Status' }}</th>
                        </tr>
                    </thead>
                    <tbody>
            } ---> Unexpected closing block

Angular模板语法要求HTML标签必须完整闭合，不能在@for循环块内拆分<table>、<tbody>这类容器标签的开闭合逻辑——这就是编译报错的核心原因。以下是两种正确的实现方式：

方案1：@if判断数据存在性 + 内部@for遍历 #

直接通过@if判断数据是否存在，把完整表格放在条件块内，表格内部用@for生成行：

@if(licenseOverview.orders.length) {
  <table class="table table-responsive ds-table">
    <thead>
      <tr>
        <th>{{ 'Order' }}</th>
        <th>{{ 'Expected On' }}</th>
        <th>{{ 'Status' }}</th>
      </tr>
    </thead>
    <tbody>
      @for(order of licenseOverview.orders; track order.id) {
        <tr>
          <td>{{ order.reference }}</td>
          <td>{{ order.expectedOn }}</td>
          <td>{{ order.status }}</td>
        </tr>
      }
    </tbody>
    <!-- 表格表尾 -->
    <tfoot>
      <tr>
        <td colspan="3">表尾内容</td>
      </tr>
    </tfoot>
  </table>
} @else {
  <p>No data for you!</p>
}

方案2：利用@for的@empty分支（简化写法） #

如果不需要复杂的表格显示逻辑，也可以把@empty和@for配合使用，同时确保表格只在有数据时渲染：

<table class="table table-responsive ds-table" *ngIf="licenseOverview.orders.length">
  <thead>
    <tr>
      <th>{{ 'Order' }}</th>
      <th>{{ 'Expected On' }}</th>
      <th>{{ 'Status' }}</th>
    </tr>
  </thead>
  <tbody>
    @for(order of licenseOverview.orders; track order.id) {
      <tr>
        <td>{{ order.reference }}</td>
        <td>{{ order.expectedOn }}</td>
        <td>{{ order.status }}</td>
      </tr>
    }
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">表尾内容</td>
    </tr>
  </tfoot>
</table>
@empty {
  <p>No data for you!</p>
}

关键说明 #

你之前的写法把<table>的开标签放在@if(firstRow)块里，闭标签放在@if(lastRow)块里，导致编译器无法识别完整的HTML结构，所以抛出了"Unexpected closing block"错误。必须保证每个容器标签的开闭合都在同一个逻辑块内，不能跨条件/循环拆分。

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