Блог

Главная - Вопросы по программированию - Как вернуть значение из вызова api в простой диалоговой модели в angular?

Как вернуть значение из вызова api в простой диалоговой модели в angular?

#javascript #angular #endpoint

#javascript #angular #конечная точка

Вопрос:

У меня есть приложение angular 8.

И я просто хочу показать текст из вызова api в диалоговом режиме.

Итак, это вызов api в компоненте: FirstViewModalComponent

Комментарии:

1. О вашей ошибке используйте безопасный навигатор навигации (?), поскольку результат не определен при инициализации компонента : {{result?.WelcomePopupBody}}

Ответ №1:

Добавьте результат вызова в свойство компонента this.healthApiService.getWelcomePopupsByParticipant().subscribe(result => this.result);

Используйте его в view, html show с привязкой 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-контейнера и ng-шаблона - это просто пример.

Комментарии:

1. ` <div class="modal-text modal-text-first-view" [innerHTML]="результат. WelcomePopupBody"> {{результат?. WelcomePopupBody}} </div>` Не используйте привязку [innerHTML] и интерполяцию {{}}. Используйте только один. Либо вы хотите привязать правильный HTML или текст. Также подумайте о том, чтобы проголосовать за или отметить ответ.

2. хорошо, если я сделаю это: <div class="modal-text modal-text-first-view" [innerHTML]="результат. WelcomePopupBody"> Я получаю много ошибок, и если я сделаю это: <div class="modal-text modal-text-first-view"> {{результат. WelcomePopupBody}} </div> Я не получаю никаких ошибок, но ничего не отображается. Текст из api выглядит так: "welcomePopupBody": "<p> jklhlkjlkj</p>",

3. ошибка первого вида modal.component.html:3 ОШИБКА ТИПА: не удается прочитать свойство 'WelcomePopupBody' неопределенного значения в Object.updateRenderer (first-view-modal.component.html:3) в Object.debugUpdateRenderer [как updateRenderer] (core.js:30563)

4. ngOnInit() { this.updateScreenDimensions(); const test = this.healthApiService.getWelcomePopupsByParticipant() .subscribe(результат => { console.log(результат); this.result}); }

5. вам нужно определить свойство результата выше конструктора add result: any; и в ngoninit this.result = результат