angular2 与 sweetalert2 提示然后给出响应答案

【问题标题】：angular2 with sweetalert2 that prompts then gives a responseangular2 与 sweetalert2 提示然后给出响应
【发布时间】：2017-09-04 12:44:50
【问题描述】：

我有一个带有 angular2 网站的 mvc。我想给一个 sweetalert2 消息，要求用户确认他们想要更新他们的数据。如果他们确认我需要 sweetalert2 框来显示加载/等待服务调用服务器更新数据。服务器使用 bool 调用 responseds 以让用户知道更新是否成功，我想用 sweetalert2 成功或错误对话框显示它。下面是我的代码，但我的控制台给了我错误：'未处理的承诺拒绝：意外的令牌 <... angular2 sweetalert2 ajax>

我的服务最初返回一个 Observable，而我的组件有 .subscribe(...)，但我将其更改为布尔值，认为它可以在 Promise 中工作。该服务的 postaction 调用我的 ServiceAdapter 类，该类执行 http.post。

更新：

我想出了如何让它在 preConfirm 运行时显示加载，但它似乎无法调用服务。我使用 settimeout(...,5000) 模拟服务调用花费时间。 5 秒后，我收到控制台错误：无法读取未定义的属性“updateStuff”。我如何让它调用 this._myService？

更新 2/答案

更新此内容以防其他人需要相同的工作流程。我确实弄清楚了如何获得所需的工作流程。这会给出一条初始消息，然后在等待服务响应时显示加载屏幕。然后它会根据服务的响应给我一条成功或错误消息。

代码更新到最新版本。

inside my component:
constructor(private _myService: MyService){}


 onUpdateClick(){
     swal({
         title: 'Update?',
         text: 'Are you sure you want to update stuff?',
         showCancelButton: true,
         allowOutsideClick: false,
         showLoaderOnConfirm: true,
         preConfirm: function () {
             return new Promise(() => {
                     (this._myService.updateStuff(this.selectedId, this.updateObject)
                         .subscribe((result: boolean) => {


                             if (result.length > 0) {
                                 console.log("it worked with msg: " + result);
                                 swal('It worked', 'stuff was updated', 'success');
                             }
                             else {
                                 console.log("it died with error: " + result);
                                 swal('It failed', 'nothing updated', 'error');
                             }
                         }
                    ))
                 });
         }
     }).catch(function (arg) {
         console.log("exited b/c " + arg);
         swal({
             type: 'error',
             title: 'failure',
             html: 'some error response'
         })
     });
 }


my service:
updateStuff(selectedId number, updateObject: UpdateObject): Observable<boolean>{
    var params: Object = { selectedId: selectedId, updateObject: updateObject };
    var result = this.postaction(params, 'myControllerPath' )
    return result;
}

提前感谢您的帮助

【问题讨论】：

标签： angular sweetalert

【解决方案1】：

为了让您能够访问该服务，您应该在调用 swal 之前将其捕获到变量中，例如，_this = this

【讨论】：