如何防止在 angular 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

PUBLIC 图片

<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为真，也是先显示锁图再显示实图。

评估和更改需要一秒钟。

如何防止屏幕上最初出现的图像闪烁？在不闪烁的情况下切换图像的最佳方式是什么？

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>

Answer 2

我们能不能像这样检查 'canShowPrivateInfo' 是否为 false。

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

如何防止在 angular 6 中评估 ngIf 条件的延迟？在评估值之前显示默认图像。如何防止这种情况？

How to prevent the delay in evaluating ngIf condition in angular 6? Default image is displayed before evaluating the value. How to prevent this?

angular-ng-if

angular

angular6