代码之家  ›  专栏  ›  技术社区  ›  dEs12ZER

SweetAlert删除角度错误5

  •  0
  • dEs12ZER  · 技术社区  · 7 年前

    使用Angular5,我试图在代码中使用sweetAlert for delet选项,但出现了一些错误:

    enter image description here

    我使用的功能和官方的一样 link

    这是.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 ");
            }
          });
      }
    

    当出现此警报时,每当选择“确定”或“取消”时,我总是收到“很好”的警报。

    当我试图打印这个时,我知道它总是执行第一个if(willdelete),所以不管我选择ok还是cancel,这个客户机都会被删除。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Abel Valdez    7 年前

    当你试图使用 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

        2
  •  0
  •   ricnef2121    5 年前
    /*
    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)
    ```