在 SweetAlert2 模态 angular 2(4) 的结果中调用服务或变量

Question

我使用 angular 和 SweetAlert2。我的 sweetalert2 工作得很好，直到我想在确认后调用服务或任何函数或变量。

我的组件：

import swal from 'sweetalert2';

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
})
export class FilterComponent implements OnInit {

  private swal: any;

  constructor(private asyncService: AsyncService) {

  }

  ngOnInit() {
      this.getCurrentData(1);
  }

  getCurrentData(id: number) {
    this.asyncService.getCurrentFilterData(id)
      .subscribe(
        response => {
          this.filter = response.json();
        },
        error => console.log('error : ' + error)
      );
  }

  saveFilter() {
    swal({
      title: 'Are you sure?',
      text: 'You wish to save filter changes!',
      type: 'question',
      showCancelButton: true,
      confirmButtonText: 'Save',
      cancelButtonText: 'Cancel'
    }).then(function() {

      this.asyncService.filterUpdate(this.filter) // can't access to this. (this.filter or this.asyncService)
        .subscribe(
          response => {
              console.log('success');
          },
          error => console.log('error : ' + error)
        );
    });
  }

有什么解决办法我怎样才能访问这个？

Answer 1

如果您希望 this 绑定到组件实例，请使用箭头函数

.then(() => {

而不是

.then(function() {

在 SweetAlert2 模态 angular 2(4) 的结果中调用服务或变量

Calling the the service or variable in the result of SweetAlert2 modal angular 2(4)

sweetalert

angular

sweetalert2