Использование ngx-smart-modal, как оценивать только модальное содержимое, когда оно отображается - PullRequest
Новая
       9

Использование ngx-smart-modal, как оценивать только модальное содержимое, когда оно отображается

0 голосов
/ 03 июня 2019

Я разрабатываю угловое приложение. В этом приложении вы можете создать какие-то билеты поддержки. Когда пользователь завершает создание заявки и нажимает кнопку «Отправить», я показываю модальное окно, содержащее всю предоставленную информацию. Модал представляет собой смарт-модал ngx с customClass, установленным для модального бутстрапа.

После отправки билета я сбрасываю всю форму. Теперь кажется, что содержимое модального объекта оценивается, даже если оно не отображается, что приводит к ошибке «ОШИБКА TypeError: Невозможно прочитать свойство« имя »с нулевым значением», так как эти поля сбрасываются.

Есть ли способ оценить модальное содержимое, когда оно отображается?

Я пытался сделать что-то вроде этого:

<p>Category: {{selectedCategory ? selectedCategory.name : ''}}</p>

Что работает, но я не уверен, что это хороший подход?

Мой модал: 

<ngx-smart-modal #confirmSendTicket identifier="confirmSendTicket" [customClass]="'modal-body'">
  <div style="text-align: left">
    <h3>Send ticket?</h3>
    <span>
      <p>Caller:</p>
      <p>Section: {{selectedSection ? selectedSection.name : 'N/A'}}</p>
      <p>Lastname: {{this.lastname || 'N/A'}}, Firstname: {{this.firstname || 'N/A'}}, Phone
        {{this.phone || 'N/A'}}</p>
      <p>Category: {{selectedCategory.name}}</p>
      <p>Issue: {{selectedIssuesubject.name}}</p>
      <p *ngFor="let field of ticketissuesubjectFields">{{field.name + ': '}} <br /> {{field.content}}</p>
      <p>Ticketinformation:</p>
      <p>Title: {{emailSubject.value}}</p>
      <p>Description: <br />{{descriptionText.value}}</p>
      <p>Solution: <br />{{solution.value || 'N/A'}}</p>
      <p>Problem solved: {{solved.value ? 'Yes' : 'No'}}</p>
      <p *ngIf="!solved.value">Info: <br />{{info.value}}</p>
      <p>Start date: {{selectedStartDate.value.toLocaleString()}}</p>
      <p>End date: {{selectedEndDate.value.toLocaleString()}}</p>
      <p>Assessment: {{selectedAssessment.value.name}}</p>
      <p>Sending mails to: <br /></p>
      <p *ngFor="let user of selectedEmailUsers">{{user.lastname + ', ' + user.firstname}} <br /></p>
    </span>
  </div>
  <div class="row">
    <div class="col-md-6">
      <button type="button" (click)="onConfirmSendTicket()" class="btn btn-block btn-success">Send</button>
    </div>
    <div class="col-md-6">
      <button type="button" (click)="onReject()" class="btn btn-block btn-dark">Cancel</button>
    </div>
  </div>
</ngx-smart-modal>

1 Ответ

1 голос
/ 05 июня 2019

Вы можете сделать интерпретацию данных необязательной с помощью оператора безопасной навигации, например: {{ selectedSection?.name }}

Если вы хотите отобразить альтернативную строку, вы можете использовать гидратор, чтобы проверить данные, прежде чем вводить их в ваше представление: 

hydrateSection(data) {
 return { name: data.name || 'N/A' }; 
}
...