时间戳

首页 > 解决方案 > 角度 7 变化前图像闪烁

html - 角度 7 变化前图像闪烁

问题描述

我有一个页面来显示客户信息，如果客户的性别是女性或男性图片是性别是男性，我会在其中显示女性图片。HTML 代码：

<span class="d-none d-lg-block">
            <div *ngIf="male; else female">
              <img class="circular-image" src="../../../assets/images/male_profile_pic.jpeg" alt="" />
            </div>
            <ng-template #female>
              <img class="circular-image" src="../../../assets/images/female_profile_pic.jpeg" alt="" />
            </ng-template>
          </span>

打字稿代码：

this.gender = this.sampleData.individualCustomer.gender;
  if (this.gender === 'Male') {
    this.male = true;
  } else {
    this.male = false;
  }

但是，如果我加载男性客户个人资料一秒钟，我会在更改为男性个人资料图片之前看到女性个人资料图片。我该如何解决这个问题？

标签： htmlangulartypescript

解决方案

有一个标志，比如在加载客户资料后将其设置为isCustomerLoaded初始化。falsetrue

在模板中使用这个标志作为：

<span *ngIf="isCustomerLoaded" class="d-none d-lg-block">
        <div *ngIf="male; else female">
          <img class="circular-image" src="../../../assets/images/male_profile_pic.jpeg" alt="" />
        </div>
        <ng-template #female>
          <img class="circular-image" src="../../../assets/images/female_profile_pic.jpeg" alt="" />
        </ng-template>
</span>

推荐阅读