Angular 如何在字符串内插值？

在如下情况下，插入多个变量（来自一个类）的Angular2方法是什么

我的

component.ts

类如下所示：

导出类编辑器ChoiceComponent{
用户名='Black Ranger'；
年份=‘90年代的某个时候’；
图像名称='gogopowerrangers'
}

在课堂上使用a和a可以很容易地完成：

导出类编辑器ChoiceComponent{
用户名='Black Ranger'；
年份=‘90年代的某个时候’；
图像名称=‘gogopowerrangers’；
获取imageSrc（）{
返回`/images/${this.userName}/${this.year}/${this.nameOfImage}.jpg`；
}
}

绑定可以是简单的，而不是插值：

<img alt="" [src]="imageSrc" />

---

在课堂上使用a和a可以很容易地完成：

导出类编辑器ChoiceComponent{
用户名='Black Ranger'；
年份=‘90年代的某个时候’；
图像名称=‘gogopowerrangers’；
获取imageSrc（）{
返回`/images/${this.userName}/${this.year}/${this.nameOfImage}.jpg`；
}
}

绑定可以是简单的，而不是插值：

<img alt="" [src]="imageSrc" />

---

应该像您已有的那样工作：

<img alt="" src="/images/{{userName}}/{{year}}/{{nameOfImage}}.jpg" />

例如：

@Component({
  selector: 'blue',
  template: 'Hello <img src="https://{{server}}/{{path}}" />'
})
export class BlueComponent { 
  server:string='encrypted-tbn3.gstatic.com'
  path: string='images?q=tbn:ANd9GcShusMbGevCg9avhj28vFlBQsUlv49OFoXWUDyHmZOawWZUEm0L0TSB526d'

}

@组件({
选择器：“蓝色”，
模板：“你好”
})
导出类BlueComponent{
服务器：string='encrypted-tbn3.gstatic.com'
路径：string='images？q=tbn:and 9gcshumbgevcg9avhj28vflbqsulv49ofoxwudyhmzoawzuem0tsb526d'
}

演示：

---

应该像您已有的那样工作：

<img alt="" src="/images/{{userName}}/{{year}}/{{nameOfImage}}.jpg" />

例如：

@Component({
  selector: 'blue',
  template: 'Hello <img src="https://{{server}}/{{path}}" />'
})
export class BlueComponent { 
  server:string='encrypted-tbn3.gstatic.com'
  path: string='images?q=tbn:ANd9GcShusMbGevCg9avhj28vFlBQsUlv49OFoXWUDyHmZOawWZUEm0L0TSB526d'

}

@组件({
选择器：“蓝色”，
模板：“你好”
})
导出类BlueComponent{
服务器：string='encrypted-tbn3.gstatic.com'
路径：string='images？q=tbn:and 9gcshumbgevcg9avhj28vflbqsulv49ofoxwudyhmzoawzuem0tsb526d'
}

演示：

---

哦，太好了！你能给我解释一下

get

的作用吗？我是否仅以

{{imageSrc（）}}

的身份访问此文件？为什么不使用

get

编写该方法？@Moose

get

使它成为一个如果您没有该选项会怎么样的选项，因为您的信息是通过循环动态注入的。例如<代码>返回预期表达式所在的got插值。@CalebSwank为什么不让循环中的每个项都由知道自己索引的组件呈现

@johnrsharpe只是在尝试和错误过程中偶然发现了这一点，但是通过我的场景，一个简单的实现应该是这样的<代码>（'baz_'+$i）-我甚至没有想到。谢谢你的帮助。这可能也可以在上述情况下实现。哦，很好！你能给我解释一下

get

的作用吗？我是否仅以

{{imageSrc（）}}

的身份访问此文件？为什么不使用

get

编写该方法？@Moose

get

使它成为一个如果您没有该选项会怎么样的选项，因为您的信息是通过循环动态注入的。例如<代码>返回预期表达式所在的got插值。@CalebSwank为什么不让循环中的每个项都由知道自己索引的组件呈现

@johnrsharpe只是在尝试和错误过程中偶然发现了这一点，但是通过我的场景，一个简单的实现应该是这样的<代码>（'baz_'+$i）-我甚至没有想到。谢谢你的帮助。这可能也可以在上述情况下实现。那么它只是一个带大括号的文本字符串，当然？这个解决方案给了我以下错误：

解析器错误：得到插值（{}}），其中表达式应该在xx列…

是的，刚刚尝试过；彼此彼此。不完全是我所期望的！当然，它只是一个带大括号的文本字符串？这个解决方案给了我以下错误：

解析器错误：得到了插值（{}），其中表达式应该在第xx列…

是的，只是尝试了一下；彼此彼此。不完全是我所期望的！