[英]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 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 is the condition ( this.canShowPrivateInfo ) which is used to toggle between showing protected image and normal image 这是条件( this.canShowPrivateInfo ),用于在显示受保护图像和正常图像之间切换
HTML 的HTML
PUBLIC IMAGE 公众形象
<img *ngIf="canShowPrivateInfo"
[src]="uploadedImageURL"
class="profile-pic"
>
PROTECTED IMAGE 受保护的图像
<span *ngIf="!canShowPrivateInfo" class="profile-pic">
<i class="fas fa-user-lock profile-lock"></i>
</span>
So here even if canShowPrivateInfo
is true, it is first showing lock image and then it is showing actual image. 因此,即使
canShowPrivateInfo
为true,也要先显示锁定图像,然后再显示实际图像。
It is taking a second to evaluate and then changing. 评估然后更改需要花费一秒钟的时间。
How can I prevent this flickering of images initially in screen? 如何防止最初在屏幕上出现图像闪烁? Which is the best way to toggle between images without flickering?
切换图像而不闪烁的最佳方法是哪种?
To avoid this flickering you can do: 为了避免这种闪烁,您可以执行以下操作:
eg: 例如:
TS: TS:
public canShowPrivateInfo;
HTML: HTML:
<span *ngIf="!canShowPrivateInfo && canShowPrivateInfo !== undefined"
class="profile-pic">
<i class="fas fa-user-lock profile-lock"></i>
</span>
can we check 'canShowPrivateInfo' to false like this. 我们可以这样检查'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.