Angular 2 - Sweet alert 回调函数不工作

Question

我正在尝试删除我的 angular cli 应用程序中的项目。我使用甜蜜警报作为警报，我想从列表中删除一个项目。这是一个代码。此代码在打字稿文件中。

import { AuthenticationService } from '../../../services/authentication.service';
declare var swal: any;
export class AdminUsersComponent implements OnInit {

    constructor(
        private authService: AuthenticationService,
    ) { }

    deleteUser(id) {
        let userData = {
           user_id: id
        };
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false
        }, function(){
            this.authService.deleteUser(userData).subscribe(data => {
                // response
            });
        });

    }
}

问题是当我确认删除时，出现 "this.authserivce " 未定义的错误。如果我不使用 sweet alert 作为确认，它工作正常。我猜我需要在回调函数中传递参数，但不知道应该传递什么。那么我该如何解决呢？

Answer 1

第一个解决方案： 使用 arrow function 因为函数表达式将 this 与它自己的 this

绑定

swal({
        title: "Are you sure?",
        text: "You will not be able to recover this!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
    }).then((result) => {
        if (result.value) {
            this.authService.deleteUser(userData).subscribe(data => {
                // response
            });
        }
    });

第二种解法：

let that = this;
swal({
        title: "Are you sure?",
        text: "You will not be able to recover this!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
    }).then(function(result) {
        if (result.value) {
            that.authService.deleteUser(userData).subscribe(data => {
                // response
            });
        }
    });

Angular 2 - Sweet alert 回调函数不工作

Angular 2 - Sweet alert call back function not working

typescript

sweetalert

angular2-services

angular-cli

sweetalert2