Блог

Я использую [innerHTML] для отображения строки. Строка создается из двух свойств одного и того же объекта. Объект происходит из-за передачи списка объектов (из наблюдаемых из NgRx) в *ngFor . Кроме того, канал используется для определения того, что должно быть внутри [innerHTML] .

Иногда часть html, которая поступает из innerHTML, отображается медленнее, чем остальные — она задерживается.

Итак, допустим, innerHTML после канала <strong><em>MMY</em></strong> superObj123

итак, я должен видеть MMY superObj123 ,

но иногда MMY отображается на секунду позже superObj123 .

Что может быть причиной такого поведения?

Может ли быть так, что рендеринг html из innerHTML занимает больше времени, чем просто рендеринг строки, и из-за этого строка иногда отображается первой?

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}`;
  }
}
  

Эта ошибка возникает только на реальном сервере, а не локально, и я видел ее только при переходе на вкладку приложения с этим элементом сразу после входа в мое приложение.

Один из моих друзей предположил, что я должен создать мини-компонент для этого, потому что каналы предназначены не для манипулирования DOM, а скорее для значения.
Я еще не проверял, работает ли это решение (мини-компонент вместо канала) лучше.