带变量angular2的innerHTML

我想知道如何将变量放入字符串中并使用Angular2渲染它

这是我的密码：

HTML:

<div [innerHTML]="testHTML"></div>

变量：

public testHTML: string = "<h1>test - {{ variable[0] }}</h1>";

publictesthtml:string=“test-{{{variable[0]}”；

“variable”是一个字符串数组，不为null，至少包含1个值

我看到的是：

测试-{{变量[0]}

H1呈现良好。但是我的变量没有被解释

---

如何解决这个问题？

您不能动态添加HTML中任何特定于角度的内容。它们仅在静态添加到组件模板时才起作用

不过，您可以在运行时动态创建组件，并使用

ViewContainerRef.createComponent（）

---

另请参见

您可以尝试以下方法

 variable=["Angular2","Angular1"];

 constructor(){
   this.testHTML = `<h1>test - ${this.variable[0]}</h1>`; 
 }

变量=[“Angular2”，“Angular1”]；
构造函数（）{
this.testHTML=`test-${this.variable[0]}`；
}

---

演示：

好的，所以我的要求是通过API获取这个字符串值，等等，我不知道它会是什么。。。我已经放置了一个简单的解析器，当新的需求出现时，我将对其进行更新

对于那些可能感兴趣的人，下面是以下html的函数：

var test=“test-{{Contact.FirstName}”：

public retrieveValue（from:string）{
var tmp=from.split（“{”）；
对于（变量i=0；i

这个函数对数组还不起作用，但我认为它可以很容易地扩展

如果这个答案至少有10张“有用”的选票，我将把它标记为答案。否则，甘特·泽克鲍尔的答案将是：）

谢谢你们的帮助。
我在Angular 7中测试了我的解决方案

要从服务器动态加载信息，我执行了以下操作：

this.subscription = this.service.getDynamicHtml()
      .subscribe(innerHTML =>{
        this.innerHTML = <string>innerHTML;
      });

this.subscription=this.service.getDynamicHtml（）
.subscribe（innerHTML=>{
this.innerHTML=innerHTML；
});

在模板中，我只使用

    <div [innerHTML]="innerHTML"></div>



在我的例子中，服务器返回所有文本，但在您的例子中，如果订阅结束时只需要更新变量，屏幕将刷新

有关更多详细信息，请参见
为什么不创建testHTML，如
“test-”+变量[0]+”this.testHTML=
test-${this.variable[0]}
变量[0]
更改时执行的代码>。是。然后你可以得到更新的值。应该在TS级别解析它。
    <div [innerHTML]="innerHTML"></div>