Angular 2 - 在模板中的变量内显示变量

Posted 2023-02-23

【中文标题】Angular 2 - 在模板中的变量内显示变量

【英文标题】：Angular 2 - Display variable inside a variable in a template

【发布时间】：2017-06-11 18:18:15

【问题描述】：

我是 Angular 2 的新手，我想在我的模板中显示一个变量中的字符串，该变量必须包含在另一个变量中。我将向您展示一个简化的示例，说明我的问题是什么以及我想要实现的目标：

---

questionnaire.component.ts

/* Starts being "", populating an input text will modify this */
name = "Albert";

/* This variable comes from calling an API, here I just put it as created to simplify */
question.title = "Hello name, how old are you?";

questionnaire.template.html

<p>question.title</p>

---

我得到的结果是：

你好name，你几岁？

我想要的结果是：

你好，阿尔伯特，你几岁了？

我试图转义存储在我的数据库中的字符串中的“ ”，使用 ASCII 字符而不是花括号，将它放在 [innerhtml] 内...但是结果总是一样的。

你知道我该如何解决这个问题吗？

非常感谢！

【参考方案1】：

仅适用于 Angular 组件模板，不适用于任意字符串，也不适用于动态添加到 DOM 的 HTML。

改成

 question.title = `Hello $this.name, how old are you?`;

使用 TypeScript 字符串插值。

【讨论】：

谢谢！它就像一个魅力。如果“title”字段是Hello $this.name...，我想如果我直接从DB调用API获取对象“question”，它也会起作用，不是吗？

抱歉，我不知道这到底是什么意思。这取决于您将代码放在哪里以及是否可以从执行代码的位置获得 this.name，但原则上这在 TS 代码中的任何地方都有效。

好的，别担心，我会自己尝试一下，看看它是否适用于我的特殊情况。再次非常感谢！

感谢这个解决方案，最初对我不起作用，但那是因为我使用的是单引号而不是反引号！

【参考方案2】：

在 angular2 中你必须使用 this 关键字

例如，$this.name