从 HTML 属性中的 JSON 访问带有空格的键（Angular 10 属性绑定）答案

【问题标题】：Accessing key with space from JSON in HTML attribute (Angular 10 Property binding)从 HTML 属性中的 JSON 访问带有空格的键（Angular 10 属性绑定）
【发布时间】：2021-04-20 15:22:00
【问题描述】：

我正在尝试访问 HTML 属性内的 JSON 键值（带空格）。我的页面是 Angular 10 版本，我将 src 属性绑定到 JSON 中的一个键。

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

JSON

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

这里的“玩家姓名”是带空格的键。我试过了：

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

这适用于普通绑定，但不适用于此处。感谢您的帮助

【问题讨论】：

我相信element['Player Name'] 有效。 element.Player_Name 或许也值得一试。

标签： html json angular binding

【解决方案1】：

为了使用实际字符串进行绑定（而不是用于 Angular 转换的内容），请在您的情况下使用“实际字符串”：

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

【讨论】：