Solution 1 :

In order to bind using an actual string (and not something for angular to translate), use ‘actual string’, in your case:

<td mat-cell *matCellDef="let element">    
  <img [src]="element['Player Name']"/>   
</td>

Problem :

I am trying to access a JSON key value( with space) inside a HTML attribute. My page is on Angular 10 version and I am binding src attribute to a key in JSON.

<td mat-cell *matCellDef="let element">    
  <img [src]="element.Player Name"/>   
</td>

JSON

{
"Name": "Richard",
"Player Name": "https://sampleURl/example.jpg"
}

Here ‘Player Name’ is the key with space. I tried:

<td mat-cell *matCellDef="let element">    
  <img [src]="element[Player Name]"/>   
</td>

This works for normal binding but not here.
Thanks for any help

Comments

Comment posted by D M

I believe

By