Angular 2+解析JSON后，如何根据指定ID获取单个数据？

没问题！既然你已经能通过*ngFor正常展示列表数据，那要根据ID获取单个数据其实很简单，主要用到数组的find()方法就行，我分两种场景给你讲：

一、在组件类（.ts文件）中获取单个数据 #

假设你已经把接口返回的JSON数据存到了userList数组里，你可以写一个专门的方法来根据ID查找数据，或者在数据加载完成后直接获取：

import { Component } from '@angular/core';
import { Http, Response } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userList: any[] = [];
  // 可以提前定义一个变量存储目标用户
  targetUser: any;

  constructor(private http: Http) {
    // 这里是你原本获取JSON数据的逻辑
    this.http.get('你的接口地址')
      .subscribe((res: Response) => {
        this.userList = res.json();
        // 数据加载完成后，调用方法获取ID=3的用户
        this.targetUser = this.getUserById(3);
        console.log(this.targetUser?.name); // 控制台会输出"Edward"
      });
  }

  // 封装根据ID查找用户的方法
  getUserById(id: number) {
    // find()方法会返回数组中第一个匹配条件的元素
    return this.userList.find(user => user.id === id);
  }
}

二、在模板（.html文件）中直接获取 #

如果只是想在页面上直接展示指定ID的数据，也可以直接在模板里调用find()方法：

<!-- 直接在模板中查找并显示 -->
<p>ID为3的用户名称：{{ userList.find(user => user.id === 3)?.name }}</p>

<!-- 或者用*ngIf避免数据未加载时的报错 -->
<div *ngIf="userList.length > 0">
  <p>ID为3的用户名称：{{ userList.find(user => user.id === 3).name }}</p>
</div>

这里的?.是可选链操作符，能防止数据还没加载完成时，因为userList.find(...)返回undefined而导致报错，非常实用。

小提示 #

如果你的数据是异步加载的（比如HTTP请求），一定要确保userList已经有数据了再调用find()方法，不然会返回undefined。用*ngIf判断数组长度，或者在订阅回调里处理，都是很稳妥的方式。

内容的提问来源于stack exchange，提问作者phwt