innerHTML с переменными angular2

Question

Я хотел бы знать, как я могу помещать переменные внутри строки и отображать ее с помощью Angular2?

Вот мой код:

HTML:

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

Переменные:

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

"переменный" представляет собой массив из строки, а не нулевой и содержащего значение по крайней мере 1.

И что я получаю отображаемая:

тест - {{переменная [0]}}

H1 хорошо оказаны. но мои переменные не перепутаны!

Как я могу это решить?

Answer 1

У вас не может быть Угловые специфические элементы в HTML добавлены динамически. Все они работают только при добавлении статически к шаблону компонентов.

Вы можете создавать компоненты динамически во время выполнения, хотя и добавить такой компонент, используя ViewContainerRef.createComponent()

Смотрите также Equivalent of $compile in Angular 2

Answer 2

Вы можете попробовать следующий способ,

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

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

DEMO: https://plnkr.co/edit/sGTcVAym6jKjm8i7jQgb?p=preview

Answer 3

Хорошо, так как мое требование - получить это строковое значение API и т. д. Я не знаю, что это будет ... Я поставил простой синтаксический анализатор, который я обновлю, когда появятся новые потребности.

Для тех, кто может быть заинтересованы в, здесь есть функция для следующего HTML: var test = "<h1>test - {{Contact.FirstName}}</h1>";:

public retrieveValue(from: string) { 

    var tmp = from.split("{{"); 
    for (var i = 0; i < tmp.length; i++) { 

     var val = tmp[i].split("}}")[0]; 

     var toReplace = "{{" + val + "}}"; 

     var tmp1 = val.split("."); 

     var final: any | string = this; 
     for (var j = 0; j < tmp1.length; j++) 
     final = final[tmp1[j]]; 

     var re = new RegExp(toReplace,"g"); 
     from = from.replace(re, final); 
    } 

    return from; 
    } 

эта функция не работает (пока) для массива, но он может быть продлен довольно легко, я думаю.

Если этот ответ имеет не менее 10 «полезных» голосов, я помечаю его как ответ. в противном случае ответ Günter Zöchbauer будет один :)

Спасибо за помощь.