时间戳

首页 > 解决方案 > Angular - 在路由中传递数据

javascript - Angular - 在路由中传递数据

问题描述

我正在尝试在我的应用程序中实现路由。我的目标很简单：点击我的表格中的一行后，应用程序应该显示所选行的具体细节（在这种情况下为赛道车手）。

我被困在点击后路径正常工作的地方，但页面在控制台中没有返回包含以下信息的数据：

错误类型错误：无法读取未定义的属性“id”

我有一种感觉，我快到了，但经过几个小时的组合，我决定寻求帮助。下面有更多代码，我将不胜感激任何想法:)

服务.ts

  getRider(id) : Observable<Rider> {
    return this._http
      .get("http://node.gurustats.usermd.net:60519/pgee2020" + `/${id}`)
      .map(result => (this.result = result.json().data));
  }

子页面.ts

import { Component, OnInit } from "@angular/core";
import { Rider } from "../interfaces/rider";
import { SpeedwayService } from "../../speedway.service";
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: "gs-zawpgee2020",
  templateUrl: "./zawpgee2020.component.html",
  styleUrls: ["./zawpgee2020.component.less"]
})
export class ZawPgee2020Component implements OnInit {
  rider: Rider;

  constructor(
    private _speedwayService: SpeedwayService,
    private route: ActivatedRoute){}

ngOnInit() {
  this.loadZaw();  
}

loadZaw() {
  const id = +this.route.snapshot.params['id'];
  this._speedwayService.getRider(id).subscribe((rider) => {
    this.rider = rider;
})}}

子页面.html

<gs-header>
  <p logo><img src="assets/logo PGEE.jpg" /></p>
  <p levels>HISTORIA MECZÓW - {{ rider.id }}</p>

</gs-header>

数据结构（server.js）

// 20210312220521
// http://node.gurustats.usermd.net:60519/pgee2020

{
  "status": 200,
  "message": null,
  "data": [
    {
      "_id": "604a882ed87fdb0482536fc9",
      "MSC": 3,
      "ZAWODNIK": "Bartosz Zmarzlik",
      "KLUB": "Gorzów",
      "SREDNIA": 2.43,
      "id": 103
...

[routerlink] & path: "pgee20/:id" 也被编码

标签： javascriptangulartypescriptrestroutes

解决方案

http://node.gurustats.usermd.net:60519/pgee2020/[id-of-some-rider]没有给你一个骑手的数据。这就是为什么rider您的组件中的变量仍然存在的原因undefined。

http://node.gurustats.usermd.net:60519/pgee2020为您提供以下形状的数据 -

{"status":200,"message":null,"data":[{rider1-data}, {rider1-data}, ...]}

filter您可以通过在data数组上应用来获取特定骑手的数据。此外，您收到的回复并不是真正的Rider类型。因此，您需要将服务方法的返回类型更改为Observable<any>.

将您的服务方法更改为 -

getRider(id) : Observable<any> {
    return this._http
        .get<any>("http://node.gurustats.usermd.net:60519/pgee2020")
        .map(result => result.data.filter(p=> p.id == id)[0]);
}

或者 -

getRider(id) : Observable<any> {
    return this._http
        .get<any>("http://node.gurustats.usermd.net:60519/pgee2020")
        .pipe(
            map(result => result.data.filter(p=> p.id == id)[0])
      );
}

取决于你的rxjs版本。

此外，在您的 HTML 中，用于在访问其属性之前*ngIf检查是否rider有值 -

<gs-header>
    <p logo><img src="assets/logo PGEE.jpg" /></p>
    <div *ngIf="rider">
        <p levels>HISTORIA MECZÓW - {{ rider.id }}</p>
    </div>
</gs-header>

推荐阅读