typescript - Angular 7 - PrimeNg ConfirmationDialog 问题
问题描述
我有一个Angular
使用PrimeNg
组件的应用程序。我有一个问题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>
这是openDeleteSaleModal
我.ts
文件上的方法:
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 次取消按钮,这样确认对话框才开始关闭,屏幕再次出现。
关于这里可能有什么问题的任何想法?
解决方案
我自己想通了,问题出在
<p-confirmDialog ></p-confirmDialog>
标签位置,它应该在外面
<p-table>
</p-table>
我有 10 行的分页,模式打开了 10 次,将
<p-confirmDialog ></p-confirmDialog>
在table
解决问题之外
希望它可以帮助将来的人
推荐阅读
- java - 如何在 GMAIL 上发送消息 JavaMail?
- pointers - 为什么 `std::ptr::null` 不能用于未定义大小的类型?
- laravel - 按月提取每个状态的计数
- prolog - Prolog 检查重复项以回答查询(简单的方法?)
- c# - 使用 C# Oledb 过滤 excel 电子表格并返回特定值
- sql - 如何根据使用 one-hot-encoding 的数据设置标志值
- javascript - 在javascript中的字符串中计算变量子字符串
- javascript - 刷新页面时,HTML视频未在悬停时播放
- android - 未解决的依赖关系:com.android.support.constraint:constraint-layout:1.0.1
- c# - 在 VScode 中构建 WPF 应用程序给了我错误 MSB4062