Ya que tenemos la información de los lugares en Firebase, vamos a hacer la lógica en nuestra aplicación para traer la información desde allí para mostrarla a los usuarios.
Jhonatan Steven Yepes
Si les marca error en el subscribe hagan esto:
lugaresService.todosLugares() .valueChanges().subscribe(lugares => { console.log(lugares) this.lugares = lugares; });
Miguel Angeles
Funcionó, muchas gracias!
Miguel Angel Goda Molina
muchas gracias por el aporte ayudo de mucho
Julián Sotelo
Alexis Méndez Méndez
estaba cerca jeje
Mariano Logarzo
Funciona! Muchas gracias!
Brayan Jesús Salcedo Ortegano
Hola! La concatenación también podría realizarse de la siguiente forma:
this.afDB.database.ref(`lugares/${lugar.id}`).set(lugar);
Saludos!
Eduardo de la Cruz Ibarra
ProfesorMuchas gracias por el aporte!
Mauro Gomez
me parece más saludable usar los métodos del framework para eso, por algo los construyeron
Víctor Hugo Rivas Sánchez
Me funcionó el componente lugares de esta forma:
export class LugaresComponent { title: string = 'PlatziSquare'; lat: number = 4.6560716; lng: number = -74.0595918; lugares = null; constructor(private lugaresService: LugaresService) { this.lugaresService.getLugares() .valueChanges() .subscribe(lugares => { this.lugares = lugares; }); } }
Alan Fermin
Muchas Gracias, me sirvió este código
Julio Yacot
Me gustaría ver alguna actualiación de este video usando Firestore
Gustavo Alfredo Palomino Castellanos
Usuario anónimo
UserGenial seguiré para la actualización de FireStore.
Nelson Celis
Company_admin
Chema Muñoz
Muchas gracias de nuevo!
Harold Wilson Castaño Moreno
Gracias por el aporte, funciono correctamente.
Milciades Vargas Liz
solucion para las ultimas versiones de firedatabase
public getLugares(){ return this.afDB.list('lugares/').valueChanges(); }```
EDGAR ROMERO BULA
gracias compa
Greivin Fonseca
Haciendo lo mismo que la guía del curso solo que en lugares.services.ts, lo coloque así , porque sino me daba un error que AngularFIRE Property 'subscribe' does not exist on type ...
<public getLugares(){ return this.afDB.list('lugares/').valueChanges(); }>
Jesus ibanez
Ya está muy desactualizado, no puedo obtener los datos de firebase.
Diego Forero
Team PlatziHola, hay un curso con la versión 6 https://platzi.com/clases/angular-avanzado/ la 6 es la versión LTS actual
Juan Esteban Angulo Uribe
Yo utilizo la libreria angular2-uuid a mi parecer es mucho más practico y adecuado para generar el ID.
Saludos!
Jhon Castrillon
Como se puede colocar un automerico en firebase… 1,2,3,4,5…
carlos Alberto Bedoya Ramirez
Un alert no es la mejor forma de generar un aviso para el usuario
VICTOR ALFONSO AGUILARTE SANTIL
public getLugares(){ return this.afDB.collection('lugares/').valueChanges(); }```
Jesús Antonio Cabarcas Gómez
Hola buenas noches Como obtengo un solo registro no he podido hacer
Usuario anónimo
UserLa comunidad de este curso es una de las mejores. Solucionan problemas.
Wilfredo Bardales
Wilfredo Bardales
uso angular 6
Juan Carlos Barcinilla Alarcon
Lo bueno de esa api de Firebase, que uno no hace el tradicional método conectar y desconectar de Base de datos ella hace todo eso y pues reponde super rápido, abria que probar con mayor cantidad de registro a ver que tal como funciona.
Newman Fajardo
con angular 8
import { Injectable } from "@angular/core"; import { AngularFirestore } from "@angular/fire/firestore"; @Injectable() export class PersonsService{ persons:Array<Object> = []; constructor(private db:AngularFirestore){ } public getPersons(){ return this.db.collection("persons").valueChanges(); } public getPerson(id){ return this.persons.filter( (person) => { return person["id"] == id })[0] || null; } public addPerson(person){ console.error(person); return this.db.collection("persons").add(person); } }
Sergio David Paez Suarez
Tengo un pequeño problema no logro que me funcione el metodo subscribe
y la consola donde se muestra la ejecucion del proyecto me aparece esto Property 'subscribe' does not exist on type 'AngularFireList<unknown>'
Erik Elyager
¿Estás usando Angular 5? de ser así necesitas anteponer una función llamada valueChanges antes del subscribe, similar a lo que se muestra aquí:
constructor(afDb: AngularFireDatabase) { afDb.list<Item>('items').valueChanges().subscribe(console.log); }
Acá la referencia.
Hola, para obtener el detalle de los negocios desde firebase se puede implementar la siguiente función:
public buscarLugar (id) { return this.afDB.object('lugares/' + id); }
o usando Template literals
public buscarLugar (id) { return this.afDB.object(`lugares/${id}`); }
Luego de ello, en detalle.component.ts modificamos la forma de obtener los lugares
this.lugaresServices.buscarLugar(this.id) .subscribe(lugar => { this.lugar = lugar; });
Y finalmente en detalle.component.html modificamos los string interpolation de lugar para que sean los mismos del objeto que se guardó en Firebase.
Usé firestore. service.ts
import { Injectable } from '@angular/core'; import { AngularFirestore } from '@angular/fire/firestore'; @Injectable({ providedIn: 'root' }) export class LugaresService { lugares = null; constructor( private db:AngularFirestore ) { } public getLugares( ){ return this.db.collection("working").valueChanges(); } public buscarId( idSearch ){ return this.lugares.find(({ id }) => id == idSearch || null ); } public guardarLugar( lugar ){ lugar.id = Date.now(); this.db.collection('working').add( lugar ); } }
lugares.component.ts:
import { Component, OnInit } from '@angular/core'; import { LugaresService } from '../shared/services/lugares.service'; @Component({ selector: 'app-lugares', templateUrl: './lugares.component.html', styleUrls: ['./lugares.component.css'] }) export class LugaresComponent implements OnInit { lugares = null; constructor( private lugaresService:LugaresService ) { lugaresService.getLugares( ) .subscribe( respond => { console.log( respond ); this.lugares = respond; }) } ngOnInit() { } }```
Hola!!
Dejo aquí el código de como me funciono. No se si será de la mejor forma, pero funciona!!
import { LugaresService } from './../services/lugares.service'; import { Component } from '@angular/core'; @Component({ selector: 'app-lugares', templateUrl: './lugares.component.html', styleUrls: ['./lugares.component.css'] }) export class LugaresComponent { title = 'PlatziSquare'; lat: number = -33.721737; lng: number = -70.73770440; lugares=null; constructor(private lugaresService:LugaresService){ this.lugares = lugaresService.getLugares(); } }
<agm-map [latitude]="lat" [longitude]="lng"> <agm-marker [latitude]="lat" [longitude]="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">Crear Nuevo Negocio</a> <ul class="list-group"> <ng-container *ngFor="let lugar of lugares"> <a routerLink="/detalle/{{lugar.id}}" [queryParams]="{action:'view',referer:'google'}"> <li class="list-group-item">{{lugar.nombre}}</li> </a> </ng-container> </ul> </div> <div> <h2>Destacados</h2> </div> </div> </div>
import {Injectable} from "@angular/core"; import { AngularFirestore} from "@angular/fire/firestore"; @Injectable() export class LugaresService{ lugares:any=[]; i:number=0; constructor(private afDB:AngularFirestore){} public getLugares(){ this.i=0; this.afDB.firestore.collection('lugares').get() .then((snapshot) => { snapshot.forEach((doc) => { this.lugares[this.i++]=doc.data(); }); }) .catch((err) => { console.log('Error getting documents', err); }); return this.lugares; } public buscarLugar(id){ return this.lugares.filter((lugar) => { return lugar.id == id }) [0] || null; } public guardarLugar(lugar){ this.afDB.collection('lugares').doc(''+lugar.id).set(lugar); }; }
Espero que sea de ayuda!! Gracias!!
todo bien hasta entrar al anuncio creado , no me aparecen los datos como el nombre , cercania , distancia.
me aparece el siguiente error :
lugares.service.ts
constructor(public afDB: AngularFirestore){} public getLugares(){ return this.afDB.collection('lugares/'); } public buscarLugar(id){ return this.lugares.filter((lugar) => { return lugar.id == id})[0] || null; } public guardarLugar(lugar){ console.log(lugar); this.afDB.collection('lugares').doc('/' + lugar.id ).set(lugar); }
lugares.component.html
<div class="lista-lugares mt-3"> <ul> <ng-container *ngFor="let lugar of lugares" > <a routerLink="../detalle/{{lugar.id}}" [queryParams]="{action:'view',referer:'google'}"> <li> <!-- <li *ngIf="lugar.active"> --> {{ lugar.nombre }} </li> </a> </ng-container> </ul> </div> <!-- /lista-lugares--> ```
lugares.componet.ts
lugares = null; constructor(private lugaresService: LugaresService) { lugaresService.getLugares() .valueChanges().subscribe(lugares =>{ console.log(lugares) this.lugares = lugares; }); }
