Question

我正在创建一个简单的待办事项列表应用程序。在首页上，我有10个用户（来自http://jsonplaceholder.typicode.com/users的数据）。每当您单击用户“详细信息”时，它都应显示另一个页面并显示基于用户ID的数据（这里是数据http://jsonplaceholder.typicode.com/todos）。在我的代码中，它显示整个数据而不是特定的用户数据。我该怎么做才能解决此问题，而无需过滤或映射数组？

这是user-details.component.ts：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';

@Component({
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.css']
})
export class UserDetailsComponent implements OnInit {

  userdetails: any[] = [];
  public userId;

  constructor(private http: HttpClient, private route: ActivatedRoute) { }

getUserDetails() {
    return this.http.get('https://jsonplaceholder.typicode.com/todos')
  }


  ngOnInit(): void {
    this.getUserDetails().subscribe(
      (userdetails: any) => this.userdetails = userdetails
    );
    }

}

Answer 1

您正在向“ http://jsonplaceholder.typicode.com/todos”发出请求，但是如果我正确理解您希望完整的信息包含所选userId的列表，那么只需访问正确的http请求示例即可：

  export class UserDetailsComponent implements OnInit {
  userdetails: any[] = [];
  public userId;

  constructor(private http: HttpClient, private route: ActivatedRoute) {}

  getUserDetails() {
    return this.http.get(
      'https://jsonplaceholder.typicode.com/todos?userId=' + this.userId
    );
  }

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.userId = params['id']; // retrive the selected user Id
    });
    this.getUserDetails().subscribe(
      (userdetails: any) => (this.userdetails = userdetails)
    );
  }
}

希望它有所帮助！

Answer 2

首先，您需要接收传递到公共变量userId中的用户ID。为此，您可以如下所示修改 user-details.component.ts 文件。

ngOnInit(): void {
    this.userId=this.route.snapshot.params['id']
    this.getUserDetails().subscribe(
        (userdetails: any) => this.userdetails = userdetails
    );
}

下一步，如果数组中每个对象的userId与公共变量都不匹配，则要隐藏数据，请更新 user-details.component.html 文件。

<tr *ngFor='let userdetail of userdetails' [hidden]="userdetail.userId!=userId">
    <th class="bg-primary">
        {{userdetail.completed}}
    </th>
</tr>

如果没有Angular项目中的地图或过滤器方法，则无法通过“ id”获取数据

2 个答案: