Vamos a provocar algunos errores para aprender a manejarlos, y mostrarle información a los usuarios, recuerda que es importante notificarle al usuario el estado de los procesos de la aplicación.
Camilo Andres Navarrete Ruiz
Buenas noches,
Realice la implementación de mensajes de error y confirmación con SweetAlert2.
Mensaje de Error
Mensaje de confirmación
Yesica Lizeth Cortés Pineda
Oh! que bien, gracias por tu aporte.
Humberto Arcaya
link a la pagina de sweetalert2
Jesus Sandrea
Ahora una pregunta importante, que tiene de malo como estábamos manejando las peticiones con socket a mi parece me parece mejor como estábamos al principio, no lo se.
Wilmer Maldonado
Nada, creo solo queria mostrar las dos opciones
Andres Gallardo
Me sumo a la pregunta
Abraham Lopez
A si es como lo soluciones.
Marwin Gelvez
Quedo de la siguiente manera:
Diego Vallejo
ME QUEDE CORTO CON LA EXPLICACIÓN DE ESTE Y OTRAS PARTES ATRÁS, EL PROFESOR NO EXPLICA BIEN LAS COSAS, PENSÉ QUE A HACER PETICIONES POST Y GET LO ÍBAMOS A HACER CON UN API REAL NO A HACER LO MISMO DE OTRA FORMA
Bruno Belisario Tijero Tolentino
constructor(private lugaresService: LugaresService) { this.lugaresService.getLugares()//.valueChanges() .subscribe(listados => { this.listados = Object.values(listados); var me =this; this.listados= Object.keys(me.listados).map(function (key) {return me.listados[key]}); }, error =>{console.log(error); alert('Tenemos algo de dificultades, disculpe las molestias. Error '+ error.statusText) }); }
Mabel Exalta Peña Garcia
tengo una duda nose como se puede hacer, ocultar automaticamente un div luego de un tiempo, como por ejemplo con la tarea que dio el profesor, de mostrar el error,.. como lo ocultariamos luego de un tiempo?
<div *ngif="error" class="alert alert-danger" role="alert"> {{ errorMessage}} </div>
Ahorra Seguros
Puedes usar la función setTimeout para que la variable "error" se convierta a false despues de ciertos milisegundos
Usuario anónimo
UserHola, les comparto un Tutorial sobre como integrar Sweetalert 2 en Angular 4, espero sea de su ayuda:
Tutorial Platzi, Angular 4
Usuario anónimo
UserHola, comparto mis alertas:
Juan Carlos Rueda Diaz
Edgar Chávez
Excelente!!, me funciono muy bien tu solución.
Rodolfo Sáenz
Edwar Baron
Team PlatziHola, son urls, fijate en la barra en el boton de imagenes, y mira el formato que genera, eso si lo quieres hacer manual.
Lo que puedes hacer, es arrastrar una imagen con el Mouse y soltarla en el cuadro del mensaje, y ella se cargara automaticamente.
juan david jaramillo zuñiga
Así logre poner el mensaje, con una “x” que al hacerle click desaparece el mensaje.
juan david jaramillo zuñiga
juan david jaramillo zuñiga
Cristian Palta
buenas clases
Carlos Uriel de Jesus Sánchez González
lugaresService.getLugares() .subscribe((lugares) => { this.lugares = lugares; var me = this; me.lugares = Object.keys(me.lugares).map(function (key) { return me.lugares[key]; }); }, error => { this.msgError = error.statusText; });
Gustavo Fabian Sandoval
que diferencia hay en capturar el error como lo hizo Eduardo y usar un catch ?
Edwar Baron
Team PlatziHola, para peticiones http las librerias proveen la forma de capturar los errores como en el ejemplo de la clase, un catch se usa mas en codigo de logica donde algunas operaciones pueden fallar.
Usuario anónimo
User
Jehison Orostegui
No entendi nada de este modulo
Diego Forero
Team PlatziEn este módulo se explica como poder manejar los diferentes errores que se pueden presentar en tu aplicación para dar el feedback correcto al usuario y no que se presente un error y el usuario no se entere y piense que la aplicación tiene una falla que la hace no usable, por ejemplo si intenta buscar un lugar que no existe en nuestra base de datos pero no le retornas nada, el usuario simplemente piensa que la aplicación tiene un error, pero si le dices que no se encuentra ese lugar dentro de la base de datos el usuario puede llegar a sugerir incluirla. El manejo de errores es algo muy importante para cualquier aplicación.
Maria de los Angeles Silva Gutierrez
lugares.component.ts constructor(private lugaresService: LugaresService){ //this.lugares = lugaresService.getLugares(); lugaresService.getLugares().subscribe(lugares =>{ this.lugares = lugares; var me = this; me.lugares = Object.keys(me.lugares).map(function (key) { return me.lugares [key]; }); //debugger; // para ver si llega el array }, error =>{ //console.log(error); //this.ErrorMsj='Algo salio mal, disculpe las molestia. Error:' + error.statusText; //this.error = true; Swal.fire({ type: 'error', title: 'Error de comunicación', text: 'Algo salio mal.! Disculpa las molestias',
}) });
lugares.component.html
<div class="col-md-12"> <div class="alert alert-warning hidden" role="alert" *ngIf="error"> {{ErrorMsj}} </div> </div>
Víctor Hugo Rivas Sánchez
html
<div *ngIf="error" class="alert alert-danger" role="alert"> {{error}} </div>
TS
this.lugaresService.getLugares() // .valueChanges() => if it's used with database queries .subscribe(lugares => { this.lugares = Object.values(lugares); }, error => { console.log(error); this.error = 'Error:' + error.statusText; });
lugares.component.html
Agregar
<div class="alert alert-danger" role="alert" [ngClass]="{hide: msgError == ''}"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> <span id="msgError">{{msgError}}</span> </div>
lugares.component.ts
msgError = ''; lugaresService.getLugares() .subscribe((lugares) => { this.lugares = lugares; var me = this; me.lugares = Object.keys(me.lugares).map(function (key) { return me.lugares[key]; }); }, error => { this.msgError = error.statusText; });
<div class="alert alert-danger hidden" role="alert" *ngIf="error"> {{errorMessage}} </div>
constructor(private lugaresService: LugaresService) { lugaresService.getLugares() .subscribe( lugares => { this.lugares = Object.keys(lugares).map( key => lugares[key]); }, error => { this.errorMessage = 'Disculpe, tenemos dificultades para mostrar esto. Error:' + error.statusText; this.error = true; }); }
¿Cómo le hacen para adjuntar imágenes a estos comentarios? ¿o son urls?
lugares.component.ts
import { Component } from '@angular/core'; import { LugaresService } from '../services/lugares.service'; @Component({ selector: 'app-lugares', templateUrl: './lugares.component.html' }) export class LugaresComponent { title = 'PlatziSquare'; lat:number = 11.0094247; lng:number = -74.83508; valor:number = 17; lugares=null; error=""; err=true; bhide=false; constructor(private lugaresService: LugaresService){ lugaresService.getLugares() .subscribe((lugares) => { this.lugares = lugares; var me = this; me.lugares = Object.keys(me.lugares).map(function (key) { return me.lugares[key]; }); }, error => { console.log(error); this.error = error.statusText; // alert("tenemos algo de dificultades, disculpe las molestias. Error: " + error.statusText ) this.err = false; }); } closeErrorMessage(){ this.err = true; this.bhide = true; } }
lugares.component.html
<div class="container"> <div class="row"> <div class="col-md-8"> <button [hidden]="bhide"type="button" class="close" aria-label="Close" (click)="closeErrorMessage()"> <span aria-hidden="true">×</span></button> <p class="bg-danger" [hidden]="err"> tenemos algo de dificultades, disculpe las molestias. Error: {{error}}</p> </div> </div> </div> <agm-map [latitude]="lat" [longitude]="lng" [zoom]="valor"> <agm-marker *ngFor="let lugar of lugares" [latitude]="lugar.lat" [longitude]="lugar.lng"></agm-marker> </agm-map> <hr> <div class="container"> <div class="row"> <div class="col-md-8"> <h2>lugares cercanos</h2> <a class="btn btn-primary" routerLink="/crear/new">crear nuevo negocio</a> <ul class="list-group"> <ng-container *ngFor="let lugar of lugares"> <a routerLink="/crear/{{lugar.id}}" [queryParams]="{action:'edit', referer: 'google'}"><li class="list-group-item">{{lugar.nombre}}</li></a> </ng-container> </ul> </div> <div class="col-md-4"> <h2>destacados</h2> </div> </div> </div>```
Con SweetAlert:
var direccion = this.persona.calle+','+this.persona.ciudad+','+this.persona.pais; this.personaFireBaseServices.obtenerGeoData(direccion) .subscribe((result) => { debugger; if(result.status=='OK') { this.persona.id = Date.now();//id propio this.persona.lat = result.results[0].geometry.location.lat; this.persona.lng = result.results[0].geometry.location.lng; var id=this.personaFireBaseServices.savePesona(this.persona);//.subscribe((r)=>console.log(r), (e)=>console.log(e)); // LIMPIAMOS LOS CONTROLES this.persona = []; this.persona.plan = ''; this.persona.estatura = 0; this.persona.porte = 'pequeño'; this.persona.edad = 0; this.persona.nombre = ''; this.persona.pais = ''; this.persona.ciudad = ''; this.persona.calle = ''; swal({ title: 'Guardado!', text: 'Proceso de guardado correcto!!', type: 'success', confirmButtonText: 'Cool' }) } else{ swal({ title: 'Error en dirección!', text: 'No pudimos encontrar el lugar especificado por favor, describa nuevamente la dirección', type: 'error', confirmButtonText: 'Ok' }) } }, error => { swal({ title: 'Error en Comunicación con el servidor!', text: 'Tuvimos un problema de comunicación con el servidor de geolocalización!! por favor intentelo más tarde', type: 'error', confirmButtonText: 'Ok' }) } );
