使用ngx-smart-modal，如何仅显示模态内容（显示时）

Question

I am developing an angular app. In this app you can create some sort of support tickets. When the user is done creating the ticket and clicks the send button I am showing a modal that has all the provided information. The modal is a ngx-smart-modal with customClass set to the bootstrap modal.

After sending the ticket I reset the whole form. Now it seems like the content of the modal is being evaluated even if it is not shown, which results in 'ERROR TypeError: Cannot read property 'name' of null' errors, since those fields are reset.

Is there a way to only evaluate the modal contents when it is shown?

I tried to do something like this:

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

Which works, but I am unsure if this is a good approach?

My modal:

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

Answer 1

You can make the data's interpretation optional with the safe navigation operator like : {{ selectedSection?.name }}

If you want to display an alternative string, you can use a hydrator to check the data before injecting it into your view :

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