How to use object keys or variables with the special characters in Angular templates

27 Views Asked by At

In my Angular app I use the data from yaml file which looks like this:

id: 'test'
restart-seconds: 20
...

I need to display this data in the Angular material table (code is below).

Because one of the keys restart-seconds has the special character - I can't refer to it in my Angular template - the table code gives an error Property 'seconds' does not exist on type 'MyComponent'. (when I refer to it as element.restart-seconds in template)

<div>
  <table mat-table [dataSource]="groupDataSource">

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>ID</th>
      <td mat-cell *matCellDef="let element">{{ element.id }}</td>
    </ng-container>

    <ng-container matColumnDef="restartseconds">
      <th mat-header-cell *matHeaderCellDef>Restart Seconds</th>
      <td mat-cell *matCellDef="let element">{{ element.restart-seconds}}</td>
    </ng-container>
...

What can be done in this situation? Thank you for your help in advance!

0

There are 0 best solutions below