Angular 无法获取页面显示的具体用户信息

Question

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

代码如下：

service.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)}}

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

Angular 无法获取页面显示的具体用户信息

Can't get the specific user information to be displayed on the page in Angular

json

project

typescript

angular

jsonplaceholder