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

Question

我正在使用 [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}`;
  }
}

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

Answer 1

我的一个 friend 建议，我应该为此创建一个迷你组件，因为管道不是用于操作 DOM，而是用于操作值。
我还没有检查这个解决方案(迷你组件而不是管道)是否工作得更好。