Creando una vista de detalle para el proyecto

Solo como un comentario el class=“well” en la actual versión de bootstrap 4+ fue sustituida por class=“card card-body bg-light”

Como aporte, el tslint me recomienda usar === en la comparación del filter en vez de ==.

  buscarLugar() {
    return this.lugares.filter((lugar: any) => lugar.id === this.id )[0] || null;
  }

pero lugar.id es numbery this.id es string porque viene de la ruta del url. Así que this.id lo declaro como number y en el constructor le añado el operador unario + a la asignación para convertirlo:

id: number = null;

this.id = +this.route.snapshot.params['id'];

La clase “well” ah sido remplazada en bootstrap 4:
https://getbootstrap.com/docs/4.4/components/card/

Ejemplo de como lo maquete:

<div class="card border-secondary mb-3">
        <div class="card-header">{{ lugar.name}}</div>
        <div class="card-body text-secondary">
          <small> {{ lugar.distancia}} km.</small>
          <h5 class="card-title"> Subscripcion:  {{ lugar.plan}}</h5>
          <p class="card-text">{{ lugar.descripcion}}</p>
        </div>
   </div>

Breadcrumb

Estoy usando la extension “TsLing” en Visual Studio Code y según la recomendación puedo reducir el “filter” a:

return this.lugares.filter(lugar => lugar.id === parseInt(this.id))[0] || null;

hola buenos días, tengo una duda: se me replica la vista en todos los componentes , osea veo el mapa al cambiar de componente en los links, que debo hacer?

este curso esta genial

Si no te imprime en la vista intenta usar este codigo en la funcion buscarLugar:

 buscarlugar(){
    return this.lugares.find(({id})=>
      id == this.id)
     || null
  }```

Estuvo muy interesante la clase!

en mi caso la variable la declare asi para que funcione
lugar:any ;

y me muestre el resultado

Help! por consaola recibo los parametros de query (action & referer) pero no alcanza a los valores de lugar… alguien sabe como resolverlo ?

no me funciona mostar la informacion de detalle para cada ID. me muestra la misma informacion del id1, independiente a cual <a> le de click:

detalle.component.ts
import { Component } from ‘@angular/core’;
import { ActivatedRoute } from ‘@angular/router’;

@Component({
selector: ‘app-detalle’,
templateUrl: ‘./detalle.component.html’
})
export class DetalleComponent {
lugares:any=[
{id: 1, plan: ‘pagado’, cercania: 1, distancia: 1, active: true, nombre:‘Florería la Gardenia’, description:‘Descripción de este negocio’},
{id: 2, plan: ‘gratuito’, cercania: 1, distancia: 1.8, active: true, nombre:‘Donas la pasadita’, description:‘Descripción de este negocio’},
{id: 3, plan: ‘gratuito’, cercania: 2, distancia: 5, active: true, nombre:‘Veterinaria la Vaquilla’, description:‘Descripción de este negocio’},
{id: 4, plan: ‘gratuito’, cercania: 3, distancia: 10, active: false, nombre:‘Sushi Sushiroll’, description:‘Descripción de este negocio’},
{id: 5, plan: ‘pagado’, cercania: 3, distancia: 35, active: true, nombre:‘Hotel la Gracia’, description:‘Descripción de este negocio’},
{id: 6, plan: ‘gratuito’, cercania: 3, distancia: 120, active: false, nombre:‘Zapateria el Clavo’, description:‘Descripción de este negocio’}
];
id=null;

lugar:any= null;
constructor(private route: ActivatedRoute){
console.log(this.route.snapshot.params[‘id’]);
console.log(this.route.snapshot.queryParams[‘action’]);
console.log(this.route.snapshot.queryParams[‘referer’]);
this.id=this.route.snapshot.params[‘id’];
this.lugar=this.buscarLugar();
}

buscarLugar(){
return this.lugares.filter((lugar: { id: any; })=>{return lugar.id=this.id})[0] || null;
}
}

detalle.component.html

<div class=“container”>
<h1>{{lugar.nombre}}</h1>
<hr>
<small>{{lugar.distancia}}</small>
<br>
<div class=“card”>
<p>
{{lugar.description}}
</p>
<b>Plan:{{lugar.plan}}</b>
</div>
</div>

de este modo llamo las variable
<div class=“container”>
<h1>{{lugar.nombre}}</h1>
<hr/>
<small>{{lugar.distancia}} km</small>
<br/>
<p>
{{lugar.descripcion}}
</p>
<b>Plan: {{lugar.plan}}</b>
</div>
y asi es mi archivo detalle.component.ts pero me da error
import { Component } from ‘@angular/core’;
import { ActivatedRoute } from “@angular/router”;

@Component({
selector: ‘app-detalle’,
templateUrl: ‘./detalle.component.html’
})
export class DetalleComponent {
lugares:any = [
{id: 1, plan: ‘pagado’ , cercania: 1, distancia: 1 , active: true , nombre:‘Floreria de Gardenia’ , descripcion: ‘Floreria de Gardenia en Bogotá que ofrece arreglos y detalles florales, decoración de eventos y distribución al por mayor de flores de corte tipo exportación’},
{id: 2, plan: ‘gratuito’ , cercania: 1, distancia: 1.8 , active: true , nombre:‘Donas la pasadita’ , descripcion:‘Las Donas la pasadita caseras, también conocidas como donuts o rosquillas, son muy fáciles de preparar y constituyen una de las meriendas favoritas’},
{id: 3, plan: ‘gratuito’ , cercania: 2, distancia: 5 , active: true , nombre:‘Veterinaria Huellitas Felices’ , descripcion:‘La Veterinaria Huellitas Feliceses la rama de la medicina que se ocupa de la prevención, diagnóstico y tratamiento de enfermedades, trastornos y lesiones’},
{id: 4, plan: ‘gratuito’ , cercania: 3, distancia: 10 , active: false , nombre:‘Sushi Suhiroll’ , descripcion:'Sushi Suhiroll es un plato de origen japonés basado en arroz aderezado con vinagre de arroz, azúcar y sal '},
{id: 5, plan: ‘pagado’ , cercania: 3, distancia: 35 , active: true , nombre:‘Hotel la Gracia’ , descripcion:‘El Hotel la Gracia se encuentra en Bogotá y ofrece terraza, salón compartido y bar. Este hotel de 3 estrellas ofrece WiFi gratuita.’},
{id: 6, plan: ‘gratuito’ , cercania: 3, distancia: 120 , active: false , nombre:‘Zapateria el Clavo’ , descripcion:‘Zapateria el Clavo es un nuevo concepto de zapatería de moda y fiesta en València. Una oportunidad para vestir tus pies y sentirte cómoda. ¡Ven a conocernos!’}
];
id = null;
lugar:any {};
constructor(private route: ActivatedRoute){
console.log(this.route.snapshot.params[‘id’]);
console.log(this.route.snapshot.queryParams[‘action2’]);//para imprimir el objeto en la consola del navegador
console.log(this.route.snapshot.queryParams[‘referer’]);//tipo Query
this.id = this.route.snapshot.params[‘id’];
this.lugar = this.buscarLugar();
}

buscarLugar(){
  return this.lugar.filter((lugar) => { return lugar.id === this.id }) [0] || null;
}

}

return this.lugares.find(c => c.id === this.id);