Angular 使用*ngFor渲染多层级数据时嵌套表格行的实现问题

解决方案 #

你可以借助Angular的<ng-container>逻辑容器实现需求，它本身不会被渲染为真实DOM元素，仅作为承载结构性指令的载体，完全不会违反HTML的表格结构规范。
你只需要把原来绑定album循环的*ngFor移到<ng-container>上，在该容器内先渲染album本身的表格行，再循环渲染该album下所有photo对应的表格行即可。

修改后的代码片段 #

<ng-container *ngIf="myObj as data">
    <div>
      <table>
        <tbody>
          <tr>
            <td>0</td>
            <td>Company Info</td>
            <td></td>
          </tr>
          <tr>
            <td>1</td>
            <td>Title</td>
            <td>{{ myObj.title }}</td>
          </tr>
          <tr>
            <td>2</td>
            <td>ID</td>
            <td>{{ myObj.id }}</td>
          </tr>
        </tbody>
      </table>
  
      <table *ngFor="let artist of myObj.artists; let artistIndex = index">
        <tbody>
          <tr>
            <td>
              {{ artistIndex + 3 }}
            </td>
            <td>
              {{ artist.title }}
            </td>
            <td></td>
          </tr>
          <!-- 将album循环绑定到ng-container上 -->
          <ng-container *ngFor="let album of artist.albums; let albumIndex = index">
            <!-- 先渲染album本身的行 -->
            <tr>
              <td>
                {{ artistIndex + 4 + "." + albumIndex }}
              </td>
              <td>
                {{ album.title }}
              </td>
              <td></td>
            </tr>
            <!-- 再循环渲染当前album下的所有photo行 -->
            <tr *ngFor="let photo of album.photos; let photoIndex = index">
              <td>
                {{ artistIndex + 4 + "." + albumIndex + "." + photoIndex }}
              </td>
              <td style="padding-left: 20px;">
                {{ photo.title }}
              </td>
              <td>{{ photo.otherField }}</td>
            </tr>
          </ng-container>
        </tbody>
      </table>
    </div>
  </ng-container>

额外说明 #

如果需要区分层级展示，可给photo行的第二个<td>添加左侧内边距实现缩进效果，更符合树形层级的视觉呈现。

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