如何防止评估角度6中ngIf条件的延迟？ 在评估该值之前，将显示默认图像。 如何预防呢？

Question

component.ts

  this.canShowPrivateInfo;

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

这是条件（ this.canShowPrivateInfo ），用于在显示受保护图像和正常图像之间切换

的HTML

公众形象

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

受保护的图像

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

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

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

如何防止最初在屏幕上出现图像闪烁？ 切换图像而不闪烁的最佳方法是哪种？

Answer 1

为了避免这种闪烁，您可以执行以下操作：

• 在声明变量时，请勿为canShowPrivateInfo分配false 。
• 然后在HTML中添加未定义的检查。

例如：

TS：

public canShowPrivateInfo;

HTML：

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

Answer 2

我们可以这样检查'canShowPrivateInfo'为false吗？

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