簡體   English   中英

如何防止評估角度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?

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,也要先顯示鎖定圖像,然后再顯示實際圖像。

評估然后更改需要花費一秒鍾的時間。

如何防止最初在屏幕上出現圖像閃爍? 切換圖像而不閃爍的最佳方法是哪種?

為了避免這種閃爍,您可以執行以下操作:

  • 在聲明變量時,請勿為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>

我們可以這樣檢查'canShowPrivateInfo'為false嗎?

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM