时间戳

首页 > 解决方案 > 在切换按钮调用时从 api 接收数据时未显示数据

html - 在切换按钮调用时从 api 接收数据时未显示数据

问题描述

我正在尝试在如下所示的界面上显示控制台中显示的数据。单击切换按钮时会进行 API 调用，但该数据并未加载到 UI 中。

在此处输入图像描述

这是我的打字稿代码的样子：

getCardById(cardId) {
  this._transactionService.getCardById(cardId).subscribe((response) => {
    if (!this._commonService.isEmptyObject(response)) {
      var cardById = new CardDecrypt();
      cardById.other = new Other();
      cardById.maskedCardNumber = this._commonService.decrypt(response?.maskedCardNumber);
      cardById.expirationMonth = this._commonService.decrypt(response?.expirationMonth);
      cardById.expirationYear = this._commonService.decrypt(response?.expirationYear);
      cardById.fourDigit = cardById.maskedCardNumber.slice(cardById.maskedCardNumber.length - 4);
      cardById.default = response?.default;
      cardById.id = response?.id;
      cardById.name = response?.name;
      cardById.type = response?.type;
      cardById.other.address1 = (response.other.address1 != '') ? this._commonService.decrypt(response?.other.address1) : '';
      cardById.other.address2 = (response.other.address2 != '') ? this._commonService.decrypt(response?.other.address2) : '';
      cardById.other.city = (response.other.city != '') ? this._commonService.decrypt(response?.other.city) : '';
      cardById.other.country = (response.other.country != '') ? this._commonService.decrypt(response?.other.country) : '';
      cardById.other.nameOnCard = (response.other.nameOnCard != '') ? this._commonService.decrypt(response?.other.nameOnCard) : '';
      cardById.other.number = (response.other.number != '') ? this._commonService.decrypt(response?.other.number) : '';
      cardById.other.state = (response.other.state != '') ? this._commonService.decrypt(response?.other.state) : '';
      cardById.other.zipcode = (response.other.zipcode != '') ? this._commonService.decrypt(response?.other.zipcode) : '';
      console.log(cardById);
    }
    else {

    }
  });
}

这就是我存储信息并将其显示在 UI 上的方式：


<div class="payment-history-right ml-auto">
  <a class="trigger-dropdown" href="#{{card?.id}}" data-toggle="collapse" data-target="#{{card?.id}}" (click)="getCardById(card?.id)">
    <i class="fa fa-chevron-down "></i>
  </a>
</div>
<div id="{{card?.id}}" class="payment-history-item-detail collapse">
  <div class="row">
    <div class="col-md-6">
      <div class="ph-item-detail-title">Name on card</div>
      <div class="ph-item-detail-desc">{{cardById?.name}}</div>
    </div>
    <div class="col-md-6">
      <div class="ph-item-detail-title">Billing Address</div>
      <div class="ph-item-detail-subtitle">{{cardById?.other.nameOnCard}}</div>
      <div class="ph-item-detail-desc">
        {{cardById?.other.address1}} <br />
        {{cardById?.other.address2}}, <br />
        {{cardById?.other.city}}, <br />
        {{cardById?.other.state}}-{{cardById?.other.zipcode}} <br />
      </div>
    </div>
  </div>
</div>

但是这些值没有显示。

标签： htmlangulartypescript

解决方案

原因：view在从 API 加载数据之前显示。因此，您可以添加*ngIf指令以等待它。此外，如果您使用了OnPush策略，则可能需要使用手动更改检测。根据使用情况Toogle showData。

<div *ngIf="showData" class="payment-history-right ml-auto">
      <a class="trigger-dropdown" href="#{{card?.id}}" data-toggle="collapse" data-target="#{{card?.id}}" (click)="getCardById(card?.id)">
        <i class="fa fa-chevron-down "></i>
      </a>
    </div>
  </div>
  <div id="{{card?.id}}" class="payment-history-item-detail collapse">
    <div class="row">
      <div class="col-md-6">
        <div class="ph-item-detail-title">Name on card</div>
        <div class="ph-item-detail-desc">{{cardById?.name}}</div>
      </div>
      <div class="col-md-6">
        <div class="ph-item-detail-title">Billing Address</div>
        <div class="ph-item-detail-subtitle">{{cardById?.other.nameOnCard}}</div>
        <div class="ph-item-detail-desc">
          {{cardById?.other.address1}} <br />
          {{cardById?.other.address2}}, <br />
          {{cardById?.other.city}}, <br />
          {{cardById?.other.state}}-{{cardById?.other.zipcode}} <br />
        </div>
      </div>

在您的组件文件中：


public showData: boolean = false;
public cardById: any

 getCardById(cardId) {
this._transactionService.getCardById(cardId).subscribe((response) => {
  if (!this._commonService.isEmptyObject(response)) {
    this.cardById = new CardDecrypt();
    cardById.other = new Other();
    cardById.maskedCardNumber = this._commonService.decrypt(response?.maskedCardNumber);
    cardById.expirationMonth = this._commonService.decrypt(response?.expirationMonth);
    cardById.expirationYear = this._commonService.decrypt(response?.expirationYear);
    cardById.fourDigit = cardById.maskedCardNumber.slice(cardById.maskedCardNumber.length - 4);
    cardById.default = response?.default;
    cardById.id = response?.id;
    cardById.name = response?.name;
    cardById.type = response?.type;
    cardById.other.address1 = (response.other.address1 != '') ? this._commonService.decrypt(response?.other.address1) : '';
    cardById.other.address2 = (response.other.address2 != '') ? this._commonService.decrypt(response?.other.address2) : '';
    cardById.other.city = (response.other.city != '') ? this._commonService.decrypt(response?.other.city) : '';
    cardById.other.country = (response.other.country != '') ? this._commonService.decrypt(response?.other.country) : '';
    cardById.other.nameOnCard = (response.other.nameOnCard != '') ? this._commonService.decrypt(response?.other.nameOnCard) : '';
    cardById.other.number = (response.other.number != '') ? this._commonService.decrypt(response?.other.number) : '';
    cardById.other.state = (response.other.state != '') ? this._commonService.decrypt(response?.other.state) : '';
    cardById.other.zipcode = (response.other.zipcode != '') ? this._commonService.decrypt(response?.other.zipcode) : '';
    console.log(cardById);
    this.showData = true; // it will update the view 
  }
  else {

  }
});

推荐阅读