Как предотвратить задержку оценки состояния ngIf в angular 6? Изображение по умолчанию отображается перед оценкой значения. Как это предотвратить?

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 истинно, сначала показывается изображение блокировки, а затем показывается фактическое изображение.

Требуется секунда, чтобы оценить, а затем измениться.

Как я могу предотвратить это мерцание изображений изначально на экране? Какой лучший способ переключения между изображениями без мерцания?

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>