无法获取要在 Angular 页面中显示的特定用户信息

Question

我遇到了一个问题，即我无法让程序在点击时显示特定用户的信息。我能做的最好的事情就是一起显示每个用户。你能帮我解决这个问题吗？

这是代码：

服务.ts:

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import {Observable} from 'rxjs';
@ Injectable({providedIn: 'root'})
export class JSONPlaceholderpostsService {
constructor(private http: HttpClient) { }
getData():Observable<any> {
const url = "https://jsonplaceholder.typicode.com/users"
return this.http.get<any>(url)}}     

组件.ts:

import { Component, OnInit } from '@angular/core';
import { JSONPlaceholderpostsService } from 'src/app/posts/jsonplaceholderposts.service';
@ Component({
selector: 'app-userinfo',
templateUrl: './userinfo.component.html',
styleUrls: ['./userinfo.component.css']})
export class UserinfoComponent implements OnInit {
data:Array<any>
constructor(private JSONPlaceholder: JSONPlaceholderpostsService,){
this.data = new Array<any>()}
ngOnInit(): void {this.getUserInfoFromAPI()}
getUserInfoFromAPI(){
this.JSONPlaceholder.getData().subscribe((data) => {
console.log(data)this.data = data})}

component.html文件：

<p>USER INFO</p>
<ul *ngFor="let element of data">
<li><button (click)="getUserInfoFromAPI()">{{element.id}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{element.name}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{element.email}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{element.adress}}</button></li>
</ul>
<button ><a hrer="#" routerLink="/userposts" routerLinkActive="actvie">POSTS</a></button>

提前感谢大家

我想做的是，而不是每个用户的列表，只显示特定的用户信息。

Answer 1

这里我可以如何使它工作

对于路线，我将使用id而不是名称

{path: 'userinfo/:id', component: UserinfoComponent}

然后对于useInfo，我将从路由中获取用户id，并过滤列表以获取用户，然后使用该用户

Html

<p>USER INFO</p>
<ul >
<li><button (click)="getUserInfoFromAPI()">{{user.id}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{user.name}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{user.email}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{user.adress}}</button></li>
</ul>
<button ><a hrer="#" routerLink="/userposts" routerLinkActive="actvie">POSTS</a></button>

和ts

import { Component, OnInit } from '@angular/core';
import { JSONPlaceholderpostsService } from '../posts/jsonplaceholderposts.service';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-userinfo',
templateUrl: './userinfo.component.html',
styleUrls: ['./userinfo.component.css'],
})
export class UserinfoComponent implements OnInit {
user: any = '';
constructor(private JSONPlaceholder: JSONPlaceholderpostsService, private route: ActivatedRoute) {

}
ngOnInit(): void {
this.getUserInfoFromAPI();
}
getUserInfoFromAPI() {
this.JSONPlaceholder.getData().subscribe((data) => {
const userID = this.route.snapshot.paramMap.get('id') || "";
[this.user] = data.filter((user) => user.id == userID);
});
}
}