SweetAlert удаляет ошибки в angular5

Question

Работая с angular5, я пытаюсь использовать SweetAlert для опции удаления в моем коде, но я получаю некоторую ошибку:

Я использую ту же функцию, что и в официальной ссылке

Это код в .ts

import * as _swal from 'sweetalert';
import { SweetAlert } from 'sweetalert/typings/core';
const swal: SweetAlert = _swal as any;

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.scss']
})
export class ClientsComponent implements OnInit {

  pageClients:any;

   ngOnInit() {
    this.doSearch();
    this.getAllClientsList();
  }

  delete(p:Clients){

    swal({
          title: "Are you sure?",
          text: "Once deleted, you will not be able to recover this imaginary file!",
          icon: "warning",
          buttons: true,
          dangerMode: true,
        })
          .then((willDelete) => {
            if (willDelete) {
                  this.clientService.deleteClient(p.id)
                  .subscribe(data=>{
                  this.pageClients.content.splice(
                  this.pageClients.content.indexOf(p),1
                     );
                  },err=>{
                  console.log(err);
                   })
              swal("Poof! Your imaginary file has been deleted!", {
                icon: "success",
              });
            } else {
              swal("Your imaginary file is safe!");
            }
          });
    }
}

Как решить эту проблему?

РЕДАКТИРОВАТЬ

delete(p:Clients){

    swal({
      title: "are you sur ?",
      text: " nce deleted, you will not be able to recover this imaginary file!!",
      type: 'warning',
      showConfirmButton: true,
      showCancelButton: true
    })
      .then((willDelete) => {

        if (willDelete) {

          this.clientService.deleteClient(p.id)
            .subscribe(data=>{
              this.pageClients.content.splice(
                this.pageClients.content.indexOf(p),1
              );
            },err=>{
              console.log(err);
            })

          swal({
           title: " great",
            type: 'success',
          });
        } else {
          swal("you have not deleted this client yet ");
        }
      });
  }

, когда появляется это предупреждение, я всегда получаю «отличное» предупреждение всякий раз, когда я выбираю ОК или отменяю.

Когда я попытался напечатать это, я понял, что он всегда выполняет первый, если (willDelete), поэтому этот клиент удаляется независимо от того, выберу я ОК или отменить.

Answer 1

/*
Go to your project folder \node_modules\sweetalert\typings\sweetalert.d.ts

In this file comment the line // const swal: SweetAlert;

to looks like this:
*/

import swal, { SweetAlert } from "./core";

declare global {
  // const swal: SweetAlert;
  const sweetAlert: SweetAlert;
}

export default swal;
export as namespace swal;


/*
then you have to typing your options as any. 

*/


swal({
          title: "Are you sure?",
          text: "Once deleted, you will not be able to recover this imaginary file!",
          icon: "warning",
          buttons: true,
          dangerMode: true,
        }  as any)
```

Answer 2

Когда вы пытаетесь использовать функцию swal, вам нужно предоставить только свойства, доступные на SweetAlertOptions Интерфейсе У него много свойств, но этих свойств не существует

icon: "warning",
 buttons: true,
 dangerMode: true,

Вместо этого вы можете использовать:

type :'warning',
showConfirmButton: true,
showCancelButton: true,

ФИНАЛЬНЫЙ КОД

swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  type: 'warning',
  showConfirmButton: true,
  showCancelButton: true     
})
.then((willDelete) => {
  if (willDelete) {
        this.clientService.deleteClient(p.id)
        .subscribe(data=>{
        this.pageClients.content.splice(
        this.pageClients.content.indexOf(p),1
           );
        },err=>{
        console.log(err);
         })
    swal({title:"Poof! Your imaginary file has been deleted!",
      type: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});

Просто чтобы быть уверенным

Я использую следующую версию src ngx-sweetalert2

npm install --save sweetalert2 @toverux/ngx-sweetalert2

Stackblitz demo