json - Cómo obtener el parámetro de url en un enlace activado en angular 7 y llamar a la API REST desde la clase de servicio

Quiero obtener datos usando el campo id mediante parámetros Get. Lo siguiente es mi código de url en html que está redirigiendo a una página específica pero no llama al servicio para obtener la API REST

  <a [routerLink]="['/usedCars/detail', lists.id]" class="btn btn-danger">Read more...</a>

A continuación se muestra mi función service.ts y he implementado import { HttpClient, HttpErrorResponse } from '@angular/common/http';

getcarDetail(id:string){
    return this.http.get<Autocardetail>(this.ServerUrl + 'autocardetail/'+id).pipe(
      catchError(this.handleError)
    );
  }

A continuación está mi archivo component.ts donde estoy llamando al servicio en la función ngOninit.

import { Component, OnInit } from '@angular/core';

import { Router, ActivatedRoute, ParamMap} from '@angular/router';
import { Autocardetail } from '../autocardetail';
import { AutopostService } from '../autopost.service';

import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-autopostdetail',
  templateUrl: './autopostdetail.component.html',
  styleUrls: ['./autopostdetail.component.css']
})
export class AutopostdetailComponent implements OnInit {
  detail$: Observable<Autocardetail>;
  constructor(
        private route: ActivatedRoute,
        private router: Router,
        private autopostService: AutopostService
      ) {}

  ngOnInit() {
    this.detail$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        return this.autopostService.getcarDetail(params.get('id'))
    })
    );
  }
}

A continuación está mi archivo de clase

export class Autocardetail {
  id: string;
  car_name: string;
  car_model: string;
  car_built: string;
  car_manufac_year: string;
}

A continuación se muestra un ejemplo de Postman de cómo se ve una respuesta,

{
    "car_id": "0",
    "car_name": "Nissan",
    "car_model": "Sunny",
    "car_built": "Nissan inc",
    "car_manufac_year": "2019",
    "usedcarimages": [
        "0_Nissan-1.jpg",
        "0_Nissan-2.jpg"
    ]
}

Estoy utilizando este sitio web como referencia https://www.truecodex.com/course/angular-project-training/service-and-http-client-for-blog-detail-recent-blog-and-categories-angular

Respuesta #1

El único problema potencial que creo que hay en tu código es en el uso de swtichMap().

Actualmente-

switchMap((params: ParamMap) =>
  this.autopostService.getcarDetail(params.get('id'))
)

La instrucción de código this.autopostService.getcarDetail(params.get('id')) debería estar en la misma línea que switchMap() si estás usando una función flecha o se necesita mencionar una declaración de return explícita si estás separando la línea.

Formas correctas-

switchMap((params: ParamMap) => {
  return this.autopostService.getcarDetail(params.get('id'))
})

o

switchMap((params: ParamMap) => this.autopostService.getcarDetail(params.get('id')))