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

问题是，您在CardetailsComponent上没有正确的CarVM对象。您只是在这里将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).
  }
 }

数据未通过Angular 6中的路由通过

2 个答案: