Angular for loop inside {{ }}-CodePudding

<ng-container matColumnDef="SrfAssets">
  <th mat-header-cell *matHeaderCellDef>AssetID</th>
  <td mat-cell *matCellDef="let element">
    {{ element["srfAssets"].at(0)["assetId"] }},
    {{ element["srfAssets"].at(1)["assetId"] }}
  </td>
</ng-container>

How can this be done using for loop. This is how element looks like:-

[{ ...,
srfAssets:[{assetId:'abc',...},...]
},
...]

CodePudding user response：

Try this:

<ng-container *ngFor="let item of element["srfAssets"]; let i = index">
  {{item.at(i)["assetId"]}}{{i === element["srfAssets"].length - 1 ? '' : ', '}}
</ng-container>

CodePudding user response：

Table inside a table worked but it doesn't looks really nice.

     <ng-container matColumnDef="SrfAssets">
        <th mat-header-cell *matHeaderCellDef>AssetID</th>
        <td mat-cell *matCellDef="let element">
          <table mat-table [dataSource]="element['srfAssets']">
            <ng-container matColumnDef="AssetID">
              <th mat-header-cell *matHeaderCellDef></th>
              <td mat-cell *matCellDef="let element">
                {{ element["assetId"] }}
              </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="['AssetID']"></tr>
            <tr mat-row *matRowDef="let row; columns: ['AssetID']"></tr>
          </table>
          <!-- {{ element["srfAssets"].at(0)["assetId"] }},
          {{ element["srfAssets"].at(1)["assetId"] }} -->
        </td>
      </ng-container>