Question

我有一个页面显示“客户信息”，如果“客户性别”是女性或男性图片是“性别”是男性，我将在其中显示女性图片。 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;
  }

但是，如果我第二次加载“男性客户”个人资料，则在更改为“男性”个人资料图片之前，我会看到“女性”个人资料图片。我该如何解决？

Answer 1

具有一个标志，例如isCustomerLoaded初始化为false，一旦加载了客户资料，就将其设置为true。

在模板中使用以下标签：

<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>

更改角度7之前图像闪烁

1 个答案: