Question

我正在创建一个基本的Crud应用程序。我想在用户单击删除图标以确认他是否要删除记录时显示一个对话框。我正在尝试使用primeng对话框，但使用该对话框没有打开。控制台也没有错误。我不知道出了什么问题。请帮助。谢谢。

这是我的交易代码

export class ListuserComponent implements OnInit {

  constructor(private userService:UsersService,private dialogService:DialogService,private snackBar:MatSnackBar,private confirmationService:ConfirmationService) { }
  users: User[];
  msgs: Message[] = [];


  ngOnInit() {
    this.userService.getusers()
      .subscribe( data => {
        this.users = data;
      });
  }

  confirm1()
   {

    this.confirmationService.confirm({
        message: 'Are you sure that you want to proceed?',
        header: 'Confirmation',
        icon: 'pi pi-exclamation-triangle',
        accept: () => {
            this.msgs = [{severity:'info', summary:'Confirmed', detail:'You have accepted'}];
        },
        reject: () => {
            this.msgs = [{severity:'info', summary:'Rejected', detail:'You have rejected'}];
        }
    });
  }
}

这是我的html：

<div class="col-md-6">
   <p-table  #dt [value]="users" [autoLayout]="true" [globalFilterFields]="['userName','userRole']">
      <ng-template pTemplate="caption">
          <div style="text-align: right">        
              <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
              <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" class="filter">
          </div>
      </ng-template>
    <ng-template pTemplate="header">
        <tr>

              <th>Id</th>
              <th>Name</th>
              <th>Class</th>
              <th></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-user>

        <tr class="my-center-text">
            <td>{{user.id}}</td>

          <td>{{user.Name}}</td>
          <td>{{user.Class}}</td>
          <td><button mat-icon-button type="button"  matTooltip="Delete this student" matTooltipClass="example"
            (click)="confirm1()"> <mat-icon>delete_outline</mat-icon></button>
        </tr>
    </ng-template>
</p-table>
</div>

Answer 1

解决了。必须在表单元格中添加p-confirmDialog标记。

Answer 2

将以下代码添加到您的 HTML 文件中。

<p-confirmDialog header="Confirmation" icon="fa fa-exclamation-triangle" width="425"></p-confirmDialog>

PrimeNg确认对话框未打开

2 个答案: