Describe this object:
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} }
];
In my HTML code, I aim to display the service values in a 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>
{{element[1].service}} correctly outputs Service 1, but I need it to be dynamic rather than static.
I've attempted using {{element.key | json }}, which didn't work. How can I achieve a dynamic output?