Cursos Empresas Blog Live Conf Eventos Precios

0:009:29

Recursos

Resumen

Vamos a resolver el reto que te deje en el vídeo anterior.

Vamos a crear un componente en el que vamos a editar los negocios que tenemos creados en nuestra base de datos.

Reto: Crear una vista para editar records

Curso de Angular 4

Clase 38 de 80

Clase 38 / 80

Junior Enrique Rojas

Hace 9 años

Cuando hacemos la edición de un lugar la edición funciona pero la url aun guarda el mismo id, entonces cuando creemos que estamos agregando uno nuevo estamos editando el anterior. para solucionar este problema tenemos que hacer lo siguiente:

Importamos

import { Router } from '@angular/router';

constructor

 private _router: Router

Método guardarLugar:

this._router.navigate(['/crear', 'new']);

Mas información -->

Mi codigo Completo:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { LugaresService } from '../../services/lugares.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-crearnegocio',
  templateUrl: './crearnegocio.component.html',
  styleUrls: ['./crearnegocio.component.css']
})
export class CrearnegocioComponent implements OnInit {

  lugar: any = {};
  id: any;

  constructor(private _lugaresService: LugaresService, private _activatedRoute: ActivatedRoute, private _router: Router) {
    this.id = this._activatedRoute.snapshot.params['id'];
    if (this.id !== 'new') {
      this._lugaresService
        .getLugar(this.id)
        .subscribe(lugar => {
          this.lugar = lugar;
        });
    }

  }

  ngOnInit() { }

  public guardarLugar() {
    const direccion = this.lugar.calle + ',' + this.lugar.ciudad + ',' + this.lugar.pais;
    this._lugaresService
      .obtenerGeoData(direccion)
      .subscribe(result => {

        this.lugar.lat = result.json().results[0].geometry.location.lat;
        this.lugar.lng = result.json().results[0].geometry.location.lng;

        if (this.id !== 'new') {
          this._lugaresService.editLugar(this.lugar);
          alert('Negocio Editado con Exito');
          this._router.navigate(['/crear', 'new']);

        } else {
          this.lugar.id = Date.now();
          this._lugaresService.guardarLugar(this.lugar);
          alert('Negocio Creado con Exito');
          this._router.navigate(['/crear', 'new']);
        }
        this.lugar = {};

      }, error => console.log(error));

  }

}

andres flores

Hace 8 años

no veo la diferencia en los dos colocas los mismos parametros
this._router.navigate([’/crear’, ‘new’]);

Comentarios (30)30 comentarios

Jesus Sandrea

Diego Burlando

Excelente @jesussandrea12

Yohan Estiven Arias Vasquez

Excelente tu aporte

Darwel Duran

servicio

public getLugar(id){
    return this.afDB.object('lugares/'+id);
  }

componente

    this.lugaresServices.getLugar(this.id)
      .valueChanges().subscribe(lugar => {
          this.lugar = lugar;
        });

Mauro Volpe

Recomiendo el valueChanges() lo encapsules en el .getLugar(), de esa manera siempre vas a obtener un Observable al consumir el servicio!

Flapix Flapix

@maurosebastianvolpepare, a qué te refieres con encapsular?

Chema Muñoz

Ivan Cardozo

Estaría muy bueno que Platzi ponga almenos a los profesores a resolver nuestras dudas o a actualizar mínimo el código . Se que tengo que ser autodidacta , pero primero tengo que ver almenos una vez como se hacen estas cosas , porque adivino no soy.

Greivin Fonseca

Hace 7 años

ahora hay que poner el valuechanges()

<public getLugar(id){
    return this.afDB.object('lugares/'+id).valueChanges();
  }>

Jose Pech

Me salvaste! Gracias

Daniel Acero

trato de realizar esta actividad siguiendo a detalle las observaciones de mis compañeros pero me arroja el siguiente error

Alejandro Salguero Quirós

Hola! Revisa que la función getLugar() esté retornando algo, recuerda que aunque se te olvide poner el return el metodo va a seguir funcionando generando este tipo de errores

muchas gracias!!

Luis Troya

Otra opcion mientras los dos metodos hagan lo mismo

this.inputs.id = this.inputs.id || new Date().getTime();

De esta forma, solo generara un id si this.input.id es un falsy value (0, null o undefined)

Josué Estévez Fernández

Carlos Uriel de Jesus Sánchez González

manejo de parametros para identificar si es create or update

carlos Alberto Bedoya Ramirez

public actualizarLugar(lugar) {
    this.afDB.database.ref('lugares/' + lugar.id).update(lugar);
}

Es mejor crear otro componente para actualizar y asi se evita tener tantos IFS

Noé Muñoz

Hasta ahora todo el curso muy entendible, clases corta y concisas, todo lo he entendido perfectamente, 😃

Rafael Jair Sanchez Alviso

Milciades Vargas Liz

se puede dejar la misma funcion y solo se realiza el cambio en la generacion del id

if(this.id == 'new'){
                this.lugar.id = Date.now();
              }

              this.lugaresService.guardarLugar(this.lugar);
              alert('Negocio guardado con exito');
              this.lugar = {} ;

Alexis Antonio Moraga Gallardo

hola buenas, me esta arrojando este error
{
“error_message” : “You have exceeded your daily request quota for this API. We recommend registering for a key at the Google Developers Console: ”,
“results” : [],
“status” : “OVER_QUERY_LIMIT”
}
ya consegui la key desde la pagina que me muestra el error, pero donde la integro? ayuda, este problema no me deja continuar avanzando!!

Diego Forero

Team Platzi

pones la key como parámetro dentro de la url, ya deje un comentario con la documentación oficial donde dejaste una copia de este comentario.

Mariano Logarzo

Exactamente como dice GOLLUM23, la url que queremos obtener se verá así:

A esto sumaremos la dirección ingresada por el usuario.
Se puede usar la misma api que usamos en app.module.ts cuando importamos AgmCoreModule.

Usuario anónimo

User

Genial solucionaron el reto con una buena alternativa.

veronica oviedo

me surge una pregunta: No seria mas recomendable dejar de enviar los ids por la url y en su lugar mandarselo directamente al componente?

es casi imposible avanzar sin exceder el limite de consumo de la apis de google

Walter Enrique Ruiz Diaz

Aquí está mi aporte https://github.com/werd2000/mysquare

La diferencia es que utilizo mapbox

Recursos

Resumen

Reto: Crear una vista para editar records

Progreso del curso

Inicio del curso

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

Fin del curso

Sesiones en vivo

Contenido Bonus