• Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Precios
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

153
Vistas
Angular2 cannot access 'this' inside a promise

I am unable to call a function inside promise of ng2-sweetalert2 plugin

swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, delete it!'
}).then(function(x) {
    this.removeNote(key);
    swal(
    'Deleted!',
    'Your file has been deleted.',
    'success'
    );
}, function(e){
       console.log('Cancelled');
});

removeNote(key){
    this.todo.remove(key);
    this.afService.closeNote(key);
}

this.removeNote() cause error.

EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'removeNote' of undefined

How do I overcome this? I used NgZone but i get the same error

10 months ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Assuming you're using TypeScript, you could use the arrow function expression, which preserves the value of this.

swal({...}).then((x) => console.log(this)); // now 'this' is your component
10 months ago · Santiago Trujillo Denunciar

0

this is because this refers to the promise itself. do this :

let self = this;
   swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, delete it!'
}).then(function(x) {
    self.removeNote(key);
    swal(
    'Deleted!',
    'Your file has been deleted.',
    'success'
    );
}, function(e){
       console.log('Cancelled');
});

removeNote(key){
    this.todo.remove(key);
    this.afService.closeNote(key);
}
10 months ago · Santiago Trujillo Denunciar

0

You can use like following manner also:

swal({})
.then(() => { <your angular 2 service call here...>})

Following is the working example:

customDialog(id,value){
    swal({
      title: 'Are you sure?',
      text: "Message",
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes',
      cancelButtonText: 'No',
      confirmButtonClass: 'btn btn-success alertboxmargin',
      cancelButtonClass: 'btn btn-danger alertboxmargin',
      buttonsStyling: false
    }).then(() => {
      this.services.testfunction(table,value,id)
      .subscribe( result => {
        if(result) {
          if(value) {
            swal('Message!','Message.','success')
          }
          else {
            swal('Message!','Message.','success')
          }          
        }
        else {
          swal('Error!','Try again later.','error')
        }        
      });
    },
      function (dismiss) {
      // dismiss can be 'cancel', 'overlay',
      // 'close', and 'timer'
      if (dismiss === 'cancel') {
        swal('Cancelled','No action performed!','error')
      }
    })//then closing
} // Dialog Closing
10 months ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.