Блог

Я создаю базовое crud-приложение.Я хочу отобразить диалоговое окно, когда пользователь нажимает на значок удаления, чтобы подтвердить, хочет ли он удалить запись или нет.Я пытаюсь использовать диалоговое окно primeng, но диалоговое окно не открывается.В консоли тоже нет ошибок.Я не знаю, что происходит не так.Пожалуйста, помогите.Заранее спасибо.

Вот мой ts-код

 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>
  

Добавьте следующий код в свой HTML файл.

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

Решил это. Пришлось добавить тег p-confirmDialog в ячейку таблицы.