javascript - 如何在 Angular 2 中通过字符串传递模型

Question

场景(DOM):

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

场景( Controller ):

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

所以基本上有一个数组“many”，它可以将许多动态创建的字符串插入其中，并且传递给“many”的一些字符串有倒计时，而其他则没有。有没有办法通过如上所示的字符串将模型传递到 DOM 并更新计时器？如果可行，如何实现。

我真的希望这不是那些显而易见的“陷阱”之一。

谢谢

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] 更改为任何您想要的。