如何从API调用中显示单个JavaScript对象/JSON项

我从一个API调用中获取数据，我已经设法将其显示在一个表中。现在，当您单击表中的某个项目时，我想显示该项目的更详细视图

因此，当我打开localhost:4200/detail/12链接时，我想显示id=12的对象中的数据。但我不知道该怎么做

我目前从people.component.html中获取所选人员的id，如下所示

。。。
{{data.person_id}
{{data.name}
...

API的数据采用JSON格式：

[{"person_id":"1","name":"Tom"},{"person_id":"2","name":"Clarissa"},{"person_id":"4","name":"Micky"},...]

但是（在浏览器中）显示的数据记录为JavaScript对象：

0:
   person_id: 1
   name: "Tom"
2:
   person_id: 2
   name: "Clarissa"
3:
   person_id: 4
   name: "Micky"
...

那么，我如何调整people-detail.component.ts和people-detail.component.html以仅显示所选项目的数据（例如，person_id=12）而不是所有项目（这就是当前发生的情况）

这就是我的people-detail.component.ts当前的样子

...
export class PeopleDetailComponent implements OnInit {
public data: any = []
  constructor(
    public http: HttpClient, 
    private route: ActivatedRoute) { }

getData(){
    const person_id = +this.route.snapshot.paramMap.get('person_id');
    const url ='http://localhost:4000/api/allpeople'
    this.http.get(url).subscribe
      (data => this.data = data);
  }

  ngOnInit() : void{
    this.getData()
  }

这是我当前的people-detail.component.html：

id1：
{{data.regulation_id}

我赞成使用解析器

路由 首先声明详细视图的路线：

const routes: Routes = [
  {
    path: 'detail/:id',
    component: PersonComponent,
    resolve: { message: PersonResolver }
  }
];

分解器 您可以在任何需要获取人员详细信息的地方使用解析器（在加载组件之前获取数据的可重用方法）

然后在路由上创建冲突解决程序：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRoute, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { of } from "rxjs";
import { delay } from "rxjs/operators";

@Injectable()
export class PersonResolver implements Resolve<Person> {

  constructor(private route: ActivatedRoute) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    const id = route.paramMap.get('id');
    const url = 'your url here';
    return this.http.get(url);
  }

}

从'@angular/core'导入{Injectable}；
从“@angular/router”导入{Resolve，ActivatedRouteSnapshot，ActivatedRouteSnapshot，routerstatesapshot}；
从“rxjs”导入{of}；
从“rxjs/operators”导入{delay}；
@可注射（）
导出类PersonResolver实现解析{
构造函数（专用路由：ActivatedRoute）{
}
解析（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）{
const id=route.paramMap.get（'id'）；
const url='您的url在此'；
返回此.http.get（url）；
}
}

额外细节

• 我假设您需要创建PersonComponent，其中包含单击人员后要转到的人员详细信息
• 我假设您希望在使用另一个url时显示另一个组件的详细信息

显示内联版本

---

您还可以查看这一点，以选择内联我将使用解析器

路由 首先声明详细视图的路线：

const routes: Routes = [
  {
    path: 'detail/:id',
    component: PersonComponent,
    resolve: { message: PersonResolver }
  }
];

分解器 您可以在任何需要获取人员详细信息的地方使用解析器（在加载组件之前获取数据的可重用方法）

然后在路由上创建冲突解决程序：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRoute, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { of } from "rxjs";
import { delay } from "rxjs/operators";

@Injectable()
export class PersonResolver implements Resolve<Person> {

  constructor(private route: ActivatedRoute) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    const id = route.paramMap.get('id');
    const url = 'your url here';
    return this.http.get(url);
  }

}

从'@angular/core'导入{Injectable}；
从“@angular/router”导入{Resolve，ActivatedRouteSnapshot，ActivatedRouteSnapshot，routerstatesapshot}；
从“rxjs”导入{of}；
从“rxjs/operators”导入{delay}；
@可注射（）
导出类PersonResolver实现解析{
构造函数（专用路由：ActivatedRoute）{
}
解析（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）{
const id=route.paramMap.get（'id'）；
const url='您的url在此'；
返回此.http.get（url）；
}
}

额外细节

• 我假设您需要创建PersonComponent，其中包含单击人员后要转到的人员详细信息
• 我假设您希望在使用另一个url时显示另一个组件的详细信息

显示内联版本

---

您还可以查看以下内容以选择内联

您必须为数据创建接口：

export interface iUsers {
    person_id: string;
    name: string;
}

然后，您必须将代码更改为：

public data: iUsers[]  = []
 this.http.get<iUsers[]>(url).subscribe((res)=>{
    this.data = res
    console.log(this.data)
    })

公共数据：iUsers[]=[]
this.http.get（url）.subscribe（（res）=>{
this.data=res
console.log（this.data）
})

您必须为数据创建接口：

export interface iUsers {
    person_id: string;
    name: string;
}

然后，您必须将代码更改为：

public data: iUsers[]  = []
 this.http.get<iUsers[]>(url).subscribe((res)=>{
    this.data = res
    console.log(this.data)
    })

公共数据：iUsers[]=[]
this.http.get（url）.subscribe（（res）=>{
this.data=res
console.log（this.data）
})

设置单击侦听器，如下所示

    <table>
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let data of data" (click)="onClickHandler(data.person_id)">
        <td>{{data.person_id}}</td>
        <td>{{data.name}}</td>
    </tr>
</tbody>
</table>

---

按如下所示设置单击侦听器

    <table>
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let data of data" (click)="onClickHandler(data.person_id)">
        <td>{{data.person_id}}</td>
        <td>{{data.name}}</td>
    </tr>
</tbody>
</table>

---

这将帮助您console.log看起来正确，有什么问题吗？什么决定了哪个项目是

所选项目

？这将帮助您console.log看起来正确，有什么问题吗？什么决定了哪个项目是

所选项目

？是的-我忘了提到我有一个详细组件-谢谢你的提示，我不想t显示另一个组件的详细信息-但你是对的：修改urlOk是有意义的，我在stackblitz上添加了Solion以内联显示详细信息。是的-我忘了提到我有一个详细组件-谢谢你的提示，我不想显示另一个组件的详细信息-但你是对的：修改urlOk是有意义的，我补充道作为stackblitz上显示内联细节的解决方案。我将所选项目的id传递到person\u id变量中，如下所示：people.component.html:

people-detail.component.ts:
const person\u id=+this.route.snapshot.paramMap.get（'person\u id'））
-但是我不知道如何过滤这个person\u id的数据。所以我添加了
this.selected=this.data.find（data=>if（data[person\u id']==person\u id）{return true；}return flase；}；
并尝试在html中这样显示：
id2:{selected.name}
-但它不显示名称它显示了什么？请通过代码沙盒演示它。我想我可以帮助它显示“id:”一词：但是没有什么-因此它基本上显示如下列表：id:id:id:id:id:…我将所选项目的id传递到person\id变量中，如：people.component.html:
people-detail.component.ts:
const person\u id=+this.route.snapshot.paramMap.get（'person\u id'））
-但是我不知道如何过滤这个人的id的数据。所以我添加了
this.selected=this.data.find（data=>if（data[person\u id']==person\u id）{return true；}return flase；}；
并尝试在html中这样显示它：
id2:{{selected.name}
-但是它不显示名称