Angular-innerHTML属性-延迟innerHTML的一部分

问题描述

我正在使用[innerHTML]显示字符串。字符串由同一对象的两个属性组成。该对象来自将对象列表（来自NgRx的Observable）传递到*ngFor。另外，该管道用于确定[innerHTML]中应包含的内容。

有时候，来自innerHTML的html的一部分呈现的速度比其余部分慢-延迟了。

因此，假设管道之后的innerHTML是<strong><em>MMY</em></strong> superObj123

所以我应该看到MMY superObj123，

但是有时MMY在superObj123之后的第二秒呈现。

这种行为可能是什么原因？

从innerHTML呈现html是否比花费一个字符串花费更多的时间，并且因为字符串有时会首先呈现？

HTML：

<tr *ngFor="let obj of objts$ | async">
    <td *ngIf="someVar" [innerHTML]="obj | objPipe"></td>
</tr>

组件：

@select(['objts'])
public objts$: Observable<objtsInterface>;

管道：

@Pipe({
  name: 'objPipe',})
export class ObjPipe implements PipeTransform {
  public transform(value: any): any {
    if (!value) return '';
    if (!value.property1) return value.otherProperty;
    return `<strong><em>${value.property1}</em></strong> ${value.otherProperty}`;
  }
}

此错误仅在实际的服务器上发生，而不是在本地，并且仅在登录我的应用程序后使用此元素转到应用程序的选项卡时才看到它。

解决方法

我的一个朋友建议我为此创建一个微型组件，因为Pipes不是用于操作DOM，而是用于操作值。
我还没有检查这种解决方案（微型组件而不是管道）是否效果更好。

angular angular-pipe interpolation observable