Javascript 路由中的角度传递数据

我正在尝试在我的应用程序中实现路由。我的目标很简单：在点击我表格中的一行后，应用程序应该显示所选行的具体细节（在本例中为speedway rider）

我一直停留在单击后的路径正常工作的位置，但是页面在控制台中没有返回包含以下信息的数据：

错误类型错误：无法读取未定义的属性“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));
  }

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

// 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
...

子页面.html

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

</gs-header>

---

[routerlink]&路径：“pgee20/：id”也被编码http://node.gurustats.usermd.net:60519/pgee2020/[某个车手的id]不会提供单个车手的数据。这就是为什么组件中的

rider

变量保持

未定义的原因

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

{“状态”：200，“消息”：null，“数据”：[{rider1 data}，{rider1 data}，…]}

您可以通过在
数据
数组上应用
过滤器
来获取特定车手的数据。此外，您收到的响应不是真正的
Rider
类型。因此，您需要将服务方法的返回类型更改为
Observable

将您的服务方式更改为-

getRider（id）：可观察{
返回此。\u http
.get（“http://node.gurustats.usermd.net:60519/pgee2020")
.map（result=>result.data.filter（p=>p.id==id）[0]）；
}

或者-

getRider（id）：可观察{
返回此。\u http
.get（“http://node.gurustats.usermd.net:60519/pgee2020")
.烟斗(
映射（result=>result.data.filter（p=>p.id==id）[0]）
);
}

取决于您的
rxjs
版本

另外，在HTML中，在访问其属性之前，使用
*ngIf
检查
rider
是否有值-



HISTORIA MECZÓW-{{rider.id}
如上所述，
参数将被弃用。因此，建议将流程更改为此等效代码，与其他答案结合使用可能会解决您的问题

loadZaw（）{
this.route.paramMap.pipe(
开关映射（routeParaMap=>{
const id=+routeParaMap.get（'id'）；
返回此。_speedwayService.getRider（id）；
}),
采取（1）
).认购（（附文）=>{
这个。骑手=骑手；
});
}
尝试使用
paramMap
代替
this.route.paramMap.get（'id'）
。根据角度
参数
将被弃用。可能已经有了？我试过了，但是我得到了消息：
属性'get'在类型Observable上不存在
啊，对不起，我脑子里想不起来了，可能需要添加
快照
，比如
这个.route.snapshot.paramMap.get（'id'）
@penleychan
this.route.snapshot.params['id']
中的
params
是
ActivatedRouteSnapshot
类的
params
属性。链接文档是关于
ActivatedRoute
类的
params
属性的。OP使用的
params
是
ActivatedRouteSnapshot
类的属性，它没有被弃用。你是对的，在OP的代码中没有弃用，我的错误。虽然我没有看到你建议的编辑有任何改变。谢谢你的回答，我理解问题的根源。然而，我尝试了两种建议的解决方案，每次都收到了错误。第一个：
属性“data”在类型“Response”上不存在。
第二个：
找不到名称“map”。你是说“Map”吗？
I从rxjs/operators导入了{Map}，第二个输出已经更改。我现在有两个问题<需要代码>参数表达式。
类型“Response”上不存在属性“data”。
rxjs版本为5.5。6@Rafineria将
Observable
更改为
Observable
，因为您收到的响应实际上不是
Rider
类型。我会在答案中更新。谢谢您的快速回复。不幸的是，错误保持不变。@Rafineria您的角度版本是什么？