Данные не проходят через маршрут в Angular 6

Question

У меня есть приложение с таблицей автомобилей:

Это мой код:

Carcomponent.html

<tbody>
        <tr *ngFor="let car of allCars; index as carId" \>
          <td [routerLink]="['/cars', carId]">{{car.carId}}</td>
          <td>{{car.brand}}</td>
          <td>{{car.model}}</td>
          <td>{{car.color}}</td>
          <td>{{car.topSpeed }}</td>
        </tr>
</tbody>

Я зарегистрировал маршрут так:

{ path: 'cars/:carId', component: CardetailsComponent }

А это мой CarDetails.ts файл:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CarVM } from '../viewmodels/car-vm';
import { CarService } from '../services/car.service';

@Component({
  selector: 'app-cardetails',
  templateUrl: './cardetails.component.html',
  styleUrls: ['./cardetails.component.css']
})

export class CardetailsComponent implements OnInit {

  car: any;
  carList: any;

  constructor(private route: ActivatedRoute, private carservice: CarService) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.car = params.get('carId');
    });
  }
  getCarList() {
    this.carList = new CarVM();
    this.carservice.getCarById(this.carList.carId).subscribe((res: any) => {
      this.carList = res.data;
      console.log(this.carList)
    })
  }
}   

И на моем Cardetails.html Я хочу показать выбранный автомобиль так:

<h2>Car Details</h2>
<div *ngIf="car">
  <h3>{{ car.brand }}</h3>
  <h4>{{ car.model }}</h4>
  <p>{{ car.color }}</p>
</div>

Маршрутизация работает нормально, загрузка машин работает. Теперь я хочу выбрать один автомобиль и увидеть марку , модель, цвет на следующей странице. Я использую модель для этого:

export class CarVM {
  CarId: number;
  Brand: string;
  Model: string;
  Color: string;
  TopSpeed: number;
}

Как я могу увидеть выбранную машину на следующей странице?

Я следовал этому уроку:

https://angular.io/start/routing

Answer 1

Хорошо, вы, кажется, немного смущены.В компоненте cardetails вы хотите обработать carId из параметров маршрута и использовать его для получения деталей автомобиля.Вы можете либо получить их с сервера, либо сделать так, чтобы служба возвращала уже загруженные данные обо всех автомобилях.

Допустим, мы пытаемся добиться того, чтобы это произошло первым способом, это может выглядеть так:

import { map, switchMap } from 'rxjs/operators';

ngOnInit() {
  this.getCar();
}

private getCar(): void {
  this.route.paramMap.pipe(
    map(params => params.get('carId')),
    switchMap(carId => {
      return this.carservice.getCarById(carId);
    })
  ).subscribe(
    res => {
      this.car = res;
      console.log('@My car:', this.car);
    }
  );
}

Сначала вы получите carId от route.paramMap, сопоставите его с помощью rxjs map, затем с помощью switchMap позвоните вам carservice.getCarById(carId) и получите возвращаемое значение Observable, на которое вы можете подписаться.Это должно сделать свое дело.Не забудьте правильно отобразить его / создать объект CarVM из него.

Answer 2

Проблема в том, что у вас нет объекта CarVM в CardetailsComponent.Вы только получаете carId в CarVM здесь: this.car = CarVM[+params.get('carId')];

Сначала вам нужно правильно создать CarVM с вашими переменными класса.И вы можете назвать свой индекс.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CarVM } from '../viewmodels/car-vm';

@Component({
  selector: 'app-cardetails',
  templateUrl: './cardetails.component.html',
  styleUrls: ['./cardetails.component.css']
})

export class CardetailsComponent implements OnInit {

  car: any;
  carList: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
          this.car = params.get('carId');
        });
      }
   getCarList(){
   this.carList = new CarVM();
   //call your service here to fill your carList variable and once you get car list, you will be able to access variable using with your index (this.car).
  }
 }