Как передать модель через строку в угловом 2

Question

Сценарии (DOM):

<div *ngFor="let one of many"> 
    <span [innerHtml]="one"></span> 
</div> 

Сценарий (контроллер):

let many = []; 
let timer = 60; 
setInterval(() => timer--, 1000); 
many.push("this is a selection WITH a {{timer}}"); 
many.push("this is a selection WITHOUT a timer"); 

Так что в основном Theres массив "много", который может иметь много строк динамически вставляемые в нее, а также некоторые из строк, переданных в «много», имеют обратный отсчет, а другие нет. Есть ли способ передать модель в DOM через строку, как показано выше, и обновить таймер? И если это выполнится, как это можно добиться.

Я действительно надеюсь, что это не один из тех «gotchas», которые очевидны.

Грэкиас

Answer 1

PLUNKER

Это своего рода «Hacky» решение, но это работает, и вам не нужно создавать дополнительные компоненты.

Во-первых, изменить шаблон для этого:

<div *ngFor="let one of many"> 
    {{one.replace('[timer]', timer)}} 
</div> 

Во-вторых, объявить timer и many в качестве переменных класса:

export class YourComponent { 
    timer:number=60; 
    many:string[]; 

    (...) 
} 

Наконец, при добавлении новых строк в many, когда вы хотите включить timer использование [timer] вместо {{timer}}.

Вы можете изменить [timer] на все, что захотите.