在我的 Angular 项目中，如果没有映射或过滤方法，则无法通过“id”获取数据答案

【问题标题】：Can't fetch data by "id" without map or filter methods in my Angular project在我的 Angular 项目中，如果没有映射或过滤方法，则无法通过“id”获取数据
【发布时间】：2019-02-16 12:10:39
【问题描述】：

我正在创建一个简单的待办事项列表应用程序。在首页我有 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
    );
    }

}

【问题讨论】：

不使用filter或map的原因是什么？

标签： angular

【解决方案1】：

您正在向“http://jsonplaceholder.typicode.com/todos”发出请求，但如果我理解正确，您想要完整信息来完成所选用户 ID 的列表，这很简单，只需访问正确的 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)
    );
  }
}

希望对您有所帮助！

【讨论】：

我编辑了我的评论，因为我误解了重点，但是在请求中传递参数 userId 它将检索用户的待办事项列表

【解决方案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>

【讨论】：