Angular中如何将绑定值与不同变量进行拼接？

你遇到的这个错误是因为在Angular的属性绑定表达式里误用了插值语法{{}}导致的。Angular中，当你使用方括号[]进行属性绑定时，括号内部已经是一个表达式上下文了，不需要再嵌套插值语法。

错误原因分析 #

你的原代码：

<ng-template let-item="item"> 
  <input type=text [src]="myObject.urls.{{item.id}}"> 
</ng-template>

这里的[src]绑定需要的是一个合法的TypeScript表达式，而myObject.urls.{{item.id}}这种写法把插值语法放进了表达式里，Angular无法解析这种混合写法，所以抛出了Parser Error。

正确的写法 #

要动态访问对象的属性，你应该使用对象的括号访问语法，也就是把动态的属性名放在方括号里，像这样：

<ng-template let-item="item"> 
  <input type="text" [src]="myObject.urls[item.id]"> 
</ng-template>

为什么这样可行？ #

结合你提供的对象：

myObject = {urls: {33322222: "someUrlValue"}};

当item.id的值是33322222时，myObject.urls[item.id]就等价于myObject.urls.33322222，完全符合你期望的效果。这种括号访问语法正是为动态属性名设计的，完美适配你这种根据变量获取对应属性值的场景。

另外注意一下，type=text最好加上引号写成type="text"，这是更规范的HTML写法哦。

内容的提问来源于stack exchange，提问作者hellzone