Accessing key with space from JSON in HTML attribute (Angular 10 Property binding)

Question

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

I believe element['Player Name'] works. element.Player_Name may also be worth a try. — D M
– D M, Commented Jan 15, 2021 at 15:30

Moshezauros · Accepted Answer · 2021-01-15 15:48:09Z

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>

answered Jan 15, 2021 at 15:48

Moshezauros

2,5931 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accessing key with space from JSON in HTML attribute (Angular 10 Property binding)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related