Angular

Question

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

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

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

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

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

Angular - *ngFor 嵌套 table 行

Angular - *ngFor with nested table rows

html-table

ngfor