带有ngIf闪烁的Angular2项目

Question

背景

我正在创建一个信用卡表单组件。 该组件检查已输入的信用卡类型，并显示卡类型的符号/图标。 该符号是一个外部SVG，一旦识别出信用卡类型就会加载。

问题

cc符号闪烁，如下图所示。 Chrome DOM检查器中的一个外观向我展示了应用了*ngIf的元素正在发生的事情，元素正在以某种方式更新（没有任何属性更改），这似乎会导致闪烁。

码

下面是我的模板中包含闪烁部分的代码。 我检查了组件， ngIf使用的变量没有更新，除非它假设（当信用卡号更改为不同类型的信用卡号时）。

<div class="credit-card-icon" *ngIf="creditCardType != null">
    <object type="image/svg+xml" [data]="getTypeIconUrl()"></object>
</div>

什么可能导致这个问题，我将如何解决它？

UPDATE

事实证明，这实际上是由[data]属性引起的，而不是与ngIf 。 对不起指责你，ngIf。

Answer 1

写完这篇文章后，我想到了为什么它会一直尝试更新DOM元素object 。 事实证明解决方案非常明显。 由于静态data属性没有出现问题，但只有动态绑定[data]属性，我猜测它与对象相等有关。

在我的部分我用的是bypassSecurityTrustResourceUrl(url)的方法DomSanitizer为“批准”的图标的网址。

但是，以下语句始终为false：

bypassSecurityTrustResourceUrl(url) == bypassSecurityTrustResourceUrl(url)

通过缓存SafeResourceUrl从返回bypassSecurityTrustResourceUrl(url)这个问题解决了！