Angular 7 - PrimeNg ConfirmationDialog 问题

Question

我有一个使用PrimeNg 组件的Angular 应用程序。我对ConfirmDialogModule 有疑问。

这是我的html：

  <p-table [columns]="tableCols" [value]="currentEstablishment.Sales" [rows]="10" [paginator]="true">
       <ng-template pTemplate="header" let-columns class="cervezapp-grid-header-column">
           <tr class="cervezapp-grid-header-row">
               <th *ngFor="let col of columns" [ngClass]="col.field == 'Date' ? 'col-header-date' : col.field == 'Detail' ? 'col-header-detail' : col.field =='Price' ? 'col-header-price' : col.field == 'SeeDet' ? 'col-header-seedet' : 'col-header-actions'">
                    <div [ngClass]="col.field == 'Date' ? 'col-header-date' : col.field == 'Detail' ? 'col-header-detail' : col.field =='Price' ? 'col-header-price' : col.field == 'SeeDet' ? 'col-header-seedet' : 'col-header-actions'">
                        {{col.header}}
                        </div>
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-sale let-columns="columns">
                <tr class="table-body-row">
                    <td *ngFor="let col of columns">
                        <span *ngIf="col.header == 'Fecha'">{{sale[col.field]}}</span>
                        <span *ngIf="col.header == 'Detalle de venta'" class="table-body-col-small">{{sale[col.field]}}</span>
                        <span *ngIf="col.header == 'Precio total'" class="table-body-col-small">$ {{sale[col.field]}}</span>
                        <span *ngIf="col.header == 'Ver Detalle'" class="table-body-col-small">
                            <img src="../../../assets/icons/Details.svg" class="delete-icon" (click)= "show()">
                        </span>
                        <span *ngIf="col.header == 'Acciones'" class="table-body-col-small">
                            <img src="../../../assets/icons/Delete.svg" class="delete-icon" (click)="openDeleteSaleModal(sale.Id)">
                            <img src="../../../assets/icons/Edit.svg" class="edit-icon">
                        </span>
                    </td>
                </tr>
           <p-confirmDialog ></p-confirmDialog>
      </ng-template>
  </p-table>

这是我的.ts 文件中的openDeleteSaleModal 方法：

openDeleteSaleModal(Id: number){
    console.log("delete sale");
    this.confirmationService.confirm({
      message: 'Esta seguro que desea eliminar esta venta?',
      header: 'Eliminar Venta',
      icon: 'fa fa-question-circle',
      accept: () => {
        console.log("Worked");
      },
      reject: () => {
        console.log("Test");
      }
    })
  }

我的app.module文件终于来了

import {DynamicDialogModule} from 'primeng/dynamicdialog';


imports: [
    DynamicDialogModule
  ],

在控制台日志上，我只看到它执行了一次，但模态显示如下：

屏幕变黑是因为打开了大约 10 个模态实例。我必须按 10 次取消按钮，这样确认对话框才开始关闭，屏幕再次出现。

关于这里可能出现什么问题的任何想法？

Answer 1

我自己想通了，问题出在

<p-confirmDialog ></p-confirmDialog>

标签位置，应该在

之外

<p-table>
</p-table>

我有 10 行的分页，模式打开了 10 次，把

<p-confirmDialog ></p-confirmDialog>

table之外的问题解决了

希望对未来的人有所帮助