Question

我正在开发一个有角度的应用程序。在此应用中，您可以创建某种形式的支持通知单。当用户完成创建票证并单击“发送”按钮后，我将显示具有所有提供的信息的模式。该模式是ngx-smart-modal，其中customClass设置为引导模式。

发送票证后，我重新设置了整个表格。现在，即使未显示模态的内容，似乎也正在评估该模态的内容，这将导致“错误TypeError：无法读取属性'null的名称'”错误，因为这些字段已重置。

有没有办法只显示模态内容？

我试图做这样的事情：

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

Answer 1

您可以使用{{ selectedSection?.name }}

这样的安全导航运算符来使数据的解释成为可选的

如果要显示替代字符串，可以使用水化器检查数据，然后再将其注入视图：

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

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

1 个答案: