Angular - *ngFor 与嵌套表行答案

【问题标题】：Angular - *ngFor with nested table rowsAngular - *ngFor 与嵌套表行
【发布时间】：2021-12-01 22:55:30
【问题描述】：

我有一个以以下结构呈现数据的对象：

 - title
 - id
 - [artists]
   - { 
       artist obj / document ,
        - [albums]
          - { album obj / document },
          - { 
            - album obj / document 
            - [photos]
               - { photo obj / document },
               - { photo obj / document },
            },
       }

下面，我已经尽我所能循环这些数据。但是，我已经了解了专辑。现在我需要一个表格行来循环遍历照片数组。从上面可以看出，照片是相对于相册的。需要类似以下内容：

*ngFor="let photo of album.photos; let photoIndex = index"

但是，据我所知，不可能将tr 放在tr 中。欢迎提出任何建议。

<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>
          <tr *ngFor="let album of artist.albums; let albumIndex = index">
            <td>
              {{ artistIndex + 4 + "." + albumIndex }}
            </td>
            <td>
              {{ album.title }}
            </td>
            <td></td>
          </tr>

          <!-- 
              I need another row that would be *ngFor="let photo of album.photos; let photoIndex = index"
              Unable to nest a new row inside an existing row
            -->
        </tbody>
      </table>
    </div>
  </ng-container>

【问题讨论】：

把它放在上面的<td></td>里面...它仍然在<tr>循环里面。
这会将数据放在下面的单元格中，而不是一个新的，不是吗？

标签： angular html-table ngfor

【解决方案1】：

你可以试试这样的：

<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>
        <ng-container *ngFor="let album of artist.albums; let albumIndex = index">
          <tr>
            <td>
              {{ artistIndex + 4 + "." + albumIndex }}
            </td>
            <td>
              {{ album.title }}
            </td>
            <td></td>
          </tr>

          <tr *ngFor="let photo of album.photos; let photoIndex = index">
            <td>
              {{ artistIndex + 4 + "." + albumIndex + "." + photoIndex  }}
            </td>
            <td>
              {{ photo.title }}
            </td>
            <td></td>
          </tr>
        </ng-container>
      </tbody>
    </table>
  </div>
</ng-container>

【讨论】：

非常感谢@Ruslan！