如何在 angular 中的简单对话模型中调用 api 中的 return 值？

Question

我有 angular 8 个申请。

我只想在对话模式下显示来自 api 调用的文本。

所以这是组件中的 api 调用：FirstViewModalComponent

Answer 1

添加组件的调用结果属性this.healthApiService.getWelcomePopupsByParticipant().subscribe(result => this.result);

在视图中使用它，html 使用 innerHtml 绑定和其他带有插值的属性显示。您还需要包装模板内容，以便在结果未定义时不会呈现（因为您正在对后端进行异步调用，我想）。

<app-modal [modalTitle]="modalTitle" [modalId]="modalId" (closeModal)="close.emit(false)">
  <ng-container *ngIf="results; else loading">
    <div class="modal modal-first-view">
      <div class="modal-text modal-text-first-view" [innerHtml]="result.welcomePopupBody">


      </div>
      <div class="first-view-button-wrap">
        <button (click)="buttonClicked()" type="button" class="button button-double-shadow button-first-view">
          {{ result.welcomePopupButtonText }}
        </button>
      </div>
      <div class="modal-img modal-img-first-view first-view-lady">
        <img src="/assets/img/Woman-coach.png" alt="Nice lady here to help" />
      </div>
    </div>
  </ng-container>

  <ng-template #loading>
    ...Loading
  </ng-template>
</app-modal>

您需要使用 *ngIf 来确保在初始化后访问结果对象的属性。 ng-container 和 ng-template 的用法只是示例。

如何在 angular 中的简单对话模型中调用 api 中的 return 值？

How to return value from api call in simple dialog model in angular?

javascript

endpoint

angular