2017-01-01 81 views
1

場景的字符串(DOM)通過模型:如何通過在角2

<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"); 

所以基本上那裏有一個陣列 「多」 可以具有許多字符串創建動態推入它,還有一些傳遞到「很多」的字符串有倒計時,其他人沒有。有沒有一種方法可以通過如上所示的字符串將模型傳遞到DOM並定時更新?如果它可以實現的話。

我真的很希望這不是那些「難以置信」之一。

格拉西亞斯

回答

3

PLUNKER

這是怎樣的一個「哈克」的解決方案,但它的工作原理,你並不需要創建額外的組件。

首先,你的模板改成這樣:

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

二,申報timermany作爲類變量:

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

    (...) 
} 

最後,增加新的生產線時many,只要你想包括timer使用[timer]而不是{{timer}}

您可以將[timer]更改爲任何你想要的。

+0

不是。計時器值將被追加一次,並且Angulars變化檢測不會調用它來在隨後的更新中更新DOM。 – Cozzbie

+0

啊,對不起,我想我沒有正確理解這個問題。我以爲你問過如何使新添加的元素在DOM中正確顯示。那麼關於計時器的問題呢?你想知道如何定期運行定時器?如果沒有,請澄清,以便我可以幫助你。 – AArias

+0

是的,這個問題的確是關於計時器的問題,是的,好像我沒有正確地構思問題,所以讓我進行廣泛的解釋。我希望該計時器是可更新的,但我不想在組件或DOM中將其聲明爲常用方式,因爲數組「many」將接收其他字符串。所以輸出可能看起來像 '嗨,我是一個計時器(60-59-58 .... 0)< - (這是倒數計時器動態傳遞給「很多」) 你好,我們正在等着你。 < - (一個字符串動態傳遞給「很多」) 嗨怎麼了? < - (另一個字符串動態傳遞給「很多」)' – Cozzbie