angular - 如何防止在 Angular 6 中评估 ngIf 条件时出现延迟？在评估值之前显示默认图像。如何防止这种情况发生？

Question

组件.ts

  this.canShowPrivateInfo;

  if (this.canEditDetails || this.loginId == this.loggedInUser) {                    
      this.canShowPrivateInfo = true;
  } else if (this.loggedInUserPrivacy) {
      this.canShowPrivateInfo = false;
  } else {
      this.canShowPrivateInfo =true;
   }

这是用于在显示 protected 图像和普通图像之间切换的条件 ( this.canShowPrivateInfo )

HTML

公共(public)图片

<img *ngIf="canShowPrivateInfo" 
     [src]="uploadedImageURL" 
      class="profile-pic"
 >

protected 图像

<span *ngIf="!canShowPrivateInfo" class="profile-pic">
  <i class="fas fa-user-lock profile-lock"></i>
</span>  

因此，即使 canShowPrivateInfo 为 true，它也会首先显示锁定图像，然后显示实际图像。

需要一秒钟的时间来评估然后更改。

如何防止图像最初在屏幕上闪烁？在图像之间切换而不闪烁的最佳方式是什么？

Answer 1

为了避免这种闪烁，您可以这样做:

• 不要将 false 分配给 canShowPrivateInfo 作为时间 声明变量。
• 然后在 HTML 中添加未定义检查。

例如:

TS:

public canShowPrivateInfo;

HTML:

<span *ngIf="!canShowPrivateInfo && canShowPrivateInfo !== undefined"
      class="profile-pic">
       <i class="fas fa-user-lock profile-lock"></i>
</span>