Angular - *ngFor with nested table rows-CodePudding

I have an object that presents data in the following structure:

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

Below, I've done what I can so far to loop through this data. However, I've gotten as far as the albums. Now I need a table row to loop through the photos array. As you can see from above, the photos are relative to the albums. Something like the following is required:

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

However, it's not possible, as far as I'm aware, to put a tr inside a tr. Any suggestions most welcome.

<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>

CodePudding user response：

You can try something like that:

<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>