Angular 5-SVG和*ngfor cause rendering issues in IE11 but not chrome

我已经在Angular5中创建了一个组件,它将用于指示经过多个阶段的进度。它在chrome中工作得很好,但是在ie11中测试时,它有一些奇怪的行为,使得它无法使用。

组件使用svg并使用角度指令和属性绑定生成图像元素。在ie11中,它不会呈现所有元素 立刻。它将加载空的进度条和“阶段1”标签。如果我点击其中一个文本框,然后点击离开,它将加载“阶段2”标签。重复几次之后,它最终将呈现所有内容。但是,当更改文本框中的值时,更新并不像在chrome中那样顺利。

这里是一个 StackBlitz 演示问题的示例。

这似乎是一个与使用 NGOF 关于svg元素,但我不知道为什么或如何解决它。

任何帮助都将不胜感激。

---------- 编辑 ———————————————————-

我发现这个问题是由一个特殊的角度绑定引起的。如果我从第14行删除以下绑定 进度-stage-bar.component.html 那我就按预期工作了。

[class.current-stage]="isCurrentStage(stage)"

我试图用[ngClass]代替它,但同样的问题也发生了。

有谁能帮助我理解为什么这是一个问题的Internet Explorer时,它的工作没有一个问题在Chrome?