Reto: Crear una vista para editar records

Esto es como me ha funcionado a mí con los métodos de acceso a Cloud Firestore:

crear.component.ts

lugar:any = {};
id:any = null;

constructor(private lugaresService: LugaresService, private route: ActivatedRoute) {
    this.id = this.route.snapshot.params['id'];
    if (this.id !== 'new'){
      this.lugaresService.getLugar(this.id).subscribe(result =>{
        console.log(result.data());
        if (result.exists) {
          this.lugar = result.data();
        } else {
          // result.data() will be undefined in this case
          console.log("No such document!");
        }
      });
    }
  }

lugares.service.ts

public getLugar(id){
    console.log("Solicitando datos del Negocio: ", id);
    return this.db.collection('lugares').doc(id.toString()).get();
  }

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.

ahora hay que poner el valuechanges()

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

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

Genial solucionaron el reto con una buena alternativa.

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

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

Mi solución:

Preferí crear una nueva ruta llamada editar, no me gustó el estilo de mandar un new, como lo explica Eduardo.

app.module.ts

const appRoutes: Routes = [
  { path: '', component: LugaresComponent, },
  { path: 'lugares', component: LugaresComponent, },
  { path: 'detalle/:id', component: DetalleComponent, },
  { path: 'contacto', component: ContactoComponent, },
  { path: 'crear', component: CrearComponent },
  { path: 'editar/:id', component: CrearComponent }
];

En el edición puse la ruta.

lugares.component.html

 <ul class="list-group">
        <ng-container *ngFor="let lugar of lugares">
          <li class="list-group-item">
            <div class="row">
              <div class="col">
                <a routerLink="/detalle/{{lugar.id}}" [queryParams]="{action: 'view'}">
                  {{ lugar.nombre }}
                </a>
              </div>

              <!-- Edición de lugar -->
              <div class="col text-right">
                <a routerLink="/editar/{{lugar.id}}"><i class="fa fa-pencil"></i></a>
              </div>
            </div>
          </li>
        </ng-container>
      </ul>

crear.component.ts

export class CrearComponent {
  lugar: any = {};
  lugarId = null;

  constructor(private route: ActivatedRoute, private lugaresService: LugaresService) {
    this.lugarId = this.route.snapshot.params['id'];
    if (this.lugarId != null) {
      this.getLugar();
    }
  }

  public guardarLugar() {
    const direccion = `${this.lugar.calle},${this.lugar.ciudad},${this.lugar.pais}`;
    this.lugaresService.obtenerGeoData(direccion)
      .subscribe(result => {
        const location = result.json().results[0].geometry.location;
        this.lugar.lat = location.lat;
        this.lugar.lng = location.lng;
        this.lugar.id = this.lugarId || Date.now();

        if (this.lugarId == null) {
          this.lugaresService.guardarLugar(this.lugar);
          alert('Negocio Guardado Con Exito');
          this.lugar = {};
        } else {
          this.lugaresService.actualizarLugar(this.lugar);
          alert('Negocio Actualizdo Con Exito');
        }
      });
  }

  private getLugar() {
    this.lugaresService.getLugarById(this.lugarId)
      .valueChanges()
      .subscribe(result => {
        this.lugar = result;
        if (result == null) {
          this.lugar = {};
          this.lugarId = null;
        }
      });
  }
}

lugares.services.ts

  public getLugarById(lugarId) {
    return this.afDb.object(`lugares/${lugarId}`);
  }