Get string of nested object

May 28, 2022

I have an object that looks like this:

public serviceTable: Services[] = [
  { 1: { service: 'Service 1', description: 'Lorem Ipsum', serviceIsMandatory: true, serviceIsDisabled: true, price: 100, hourlyRate:100, hours: 5} },
  { 2: { service: 'Service 2', description: 'Lorem Ipsum', serviceIsMandatory: true, serviceIsDisabled: true, price: 100, hourlyRate:100, hours: 5} },
  { 3: { service: 'Service 3', description: 'Lorem Ipsum', serviceIsMandatory: true, serviceIsDisabled: true, price: 100, hourlyRate:100, hours: 5} }
];

Now in HTML, I want to output the values of service in my table.

<table mat-table [dataSource]="serviceTable" #matTableService class="mat-elevation-z8">
  <ng-container matColumnDef="service">
    <th mat-header-cell *matHeaderCellDef>Service</th>
    <td mat-cell *matCellDef="let element">{{ element[1].service }}</td>
  </ng-container>

Well, element[1].service works fine and outputs the string Service 1 but this is static and I want to make it dynamic.

I have also tried it with {{element.key | json }} but that outputs nothing. So how can I make it dynamic?

>Solution :

You can add let i = index; to iterate here.

<table mat-table [dataSource]="serviceTable" #matTableService class="mat-elevation-z8">
  <ng-container matColumnDef="service">
    <th mat-header-cell *matHeaderCellDef>Service</th>
    <td mat-cell *matCellDef="let element; let i = index;">{{ element[i].service }}</td>
  </ng-container>