角度确认警报未以模式显示答案

【问题标题】：Angular confirmation alert not showing in modal角度确认警报未以模式显示
【发布时间】：2021-12-30 22:24:27
【问题描述】：

Working Example of Success Message alert

在确认对话框模式上单击“生成”时，单击“生成报告”按钮会正确调用后端 api。但是，没有出现如上图所示的以下消息助手服务警报。这可能是由于打开的对话框模式阻止了成功消息的显示吗？

Dialog Modal with generate report button

HTML：

<p-dialog header="Confirmation Statement" [modal]="true" [visible]="display" [closable]="false"
  [style]="{width: '640px', minHeight: '480px'}">
  <ng-container>
    <div *ngIf="!generating">
      <p-radioButton name="period" value="asOfDate" label="As of Date:" [(ngModel)]="selectedPeriod"></p-radioButton>
      <p-calendar #asOfDateCal [(ngModel)]="asOfDate" dateFormat="mm/dd/yy" [monthNavigator]="true"
        [yearNavigator]="true" yearRange="1900:2300" appendTo="body"></p-calendar>
      <br>
      <br>
      <br>

      <p-radioButton name="period" value="timeframe" label="Reporting Timeframe:" [(ngModel)]="selectedPeriod">
      </p-radioButton>
      <p-calendar #beginDateCal [(ngModel)]="timeframeBegin" dateFormat="mm/dd/yy" [monthNavigator]="true"
        [yearNavigator]="true" yearRange="1900:2300" appendTo="body"></p-calendar>
      <label>Thru</label>
      <p-calendar #endDateCal [(ngModel)]="timeframeEnd" dateFormat="mm/dd/yy" [monthNavigator]="true"
        [yearNavigator]="true" yearRange="1900:2300" appendTo="body"></p-calendar>
      <br>
      <br>
      <label>Please select cost display format</label>
      <br>
      <p-radioButton name="costFormat" value="true" label="Monthly Cost" [(ngModel)]="monthlyIndictor"></p-radioButton>
      <br>
      <p-radioButton name="costFormat" value="false" label="Pay Period Cost" [(ngModel)]="monthlyIndictor">
      </p-radioButton>
      <br>
      <br>
    </div>
  </ng-container>

  <ng-container *ngIf="generating">
    <p-progressSpinner></p-progressSpinner>
  </ng-container>

  <ng-container>
    <ng-template pTemplate="footer">
      <button type=button pButton label="Generate" id="pplCvrgReptGenBtn" class="btn btn-primary" (click)="generate()"
        [disabled]="!valid() || generating ">
      </button>

      <button type=button pButton label="Close" id="pplCvrgReptGenClsBtn" class="btn btn-primary" (click)="hide()">
      </button>
    </ng-template>
  </ng-container>
</p-dialog>

打字稿：

this.generateReport(`reports/sageReport/${this.erErId}/confirmation`, params, selectedPeopleId, null, this.monthlyIndictor)
      .subscribe(res => {
        this.generating = false;
        this.messageHelperService.add({
          severity: 'success',
          summary: 'Request Submitted',
          detail: 'Requested Report is generating. You will be notified once complete'
        });
      }, errRes => {
        this.generating = false;
        this.messageHelperService.add({
          severity: 'error',
          summary: 'Error',
          detail: errRes.error.message
        });
      });
  }

【问题讨论】：

如果你想关闭对话框，你应该在创建this.messageHelperService.add(...)之前添加display=false。另一个选项是使用例如更改对话框的“z-index”。 [baseZIndex]="1"

标签： angular dialog modal-dialog primeng

【解决方案1】：

它可能显示在对话框下方，因此您看不到它您可以通过添加 style = "z-index: 1000;" 将弹出窗口设置为始终位于顶层确认提醒

【讨论】：