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

Posted 2023-05-07

【中文标题】Angular - innerHTML 属性 - innerHTML 一部分的延迟

【英文标题】：Angular - innerHTML attribute - delay of one part of the innerHTML

【发布时间】：2021-01-24 17:19:34

【问题描述】：

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

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

【参考方案1】：

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