json - How to get url parameter in activated link in angular 7 and call rest api from service class

Question

I want to fetch data using id field using Get parameters. Follwing is my html url code which is redirecting to specific page but doesn't call the service to fetch rest api

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

Below is my service.ts function and i have implemented import { HttpClient, HttpErrorResponse } from '@angular/common/http';

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

Below is my component.ts file where i am calling the service on ngOninit function.

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'))
    })
    );
  }
}

Below is my class file

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

Below is a postman example how a response look like,

{
    "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"
    ]
}

I am using this website as reference https://www.truecodex.com/course/angular-project-training/service-and-http-client-for-blog-detail-recent-blog-and-categories-angular

标签： jsonangulartypescriptangular-ui-routerangular7

Answer 1

The only potential problem I think in your code is in the usage of swtichMap().

Currently-

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

The code instruction this.autopostService.getcarDetail(params.get('id')) should be in the same line as that of swtichMap() if you are using arrow function or explicit return statement needs to be mentioned if you are breaking the line.

Correct ways-

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

or

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