json - 如何在 Angular 7 的激活链接中获取 url 参数并从服务类调用 rest api

Question

我想使用 Get 参数使用 id 字段获取数据。Follwing 是我的 html url 代码，它重定向到特定页面但不调用服务来获取 rest api

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

下面是我的 service.ts 函数，我已经实现了 import { HttpClient, HttpErrorResponse } from '@angular/common/http';

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

下面是我的 component.ts 文件，我在其中调用 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'))
    })
    );
  }
}

下面是我的类文件

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

下面是一个 postman 的例子，响应是怎样的，

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

我正在使用这个网站作为引用 https://www.truecodex.com/course/angular-project-training/service-and-http-client-for-blog-detail-recent-blog-and-categories-angular

Answer 1

我认为您的代码中唯一的潜在问题是 swtichMap() 的使用。

目前-

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

代码指令this.autopostService.getcarDetail(params.get('id')) 应该和swtichMap()在同一行 如果您正在使用 arrow function 或明确的 return 语句，则需要在断行时提及。

正确的方法-

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

或

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