[英]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,也要先顯示鎖定圖像,然后再顯示實際圖像。
評估然后更改需要花費一秒鍾的時間。
如何防止最初在屏幕上出現圖像閃爍? 切換圖像而不閃爍的最佳方法是哪種?
為了避免這種閃爍,您可以執行以下操作:
例如:
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.