Angular中如何获取Observable数组属性的唯一值

嘿，我看你已经有一个能从模拟API拉取数据的Angular服务了，返回的是一组包含用户条目信息的对象数组对吧？我来给你梳理下怎么在组件里用好这些数据，还有几个常见的处理场景，帮你快速上手～

首先先明确下你提到的模拟API返回的数据结构（用代码块更清晰）：

[ 
  { "userId": 1, "id": 1, "title": "quidem molestiae enim" }, 
  { "userId": 1, "id": 2, "title": "sunt qui excepturi placeat culpa" }, 
  { "userId": 2, "id": 3, "title": "omnis laborum odio" }, 
  { "userId": 2, "id": 4, "title": "non esse culpa molestiae omnis sed optio" }, 
  { "userId": 3, "id": 5, "title": "eaque aut omnis a" }, 
  { "userId": 4, "id": 6, "title": "natus i..." } 
]

1. 规范服务与数据类型 #

首先建议给返回的数据定义TypeScript接口，让代码更严谨，同时完善你的数据服务：

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

// 定义数据接口，匹配API返回结构
export interface UserItem {
  userId: number;
  id: number;
  title: string;
}

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // 替换成你的模拟API地址，比如jsonplaceholder的对应接口
  private fakeApiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  // 获取用户条目数据的方法，返回指定类型的Observable
  getUserItems(): Observable<UserItem[]> {
    return this.http.get<UserItem[]>(this.fakeApiUrl);
  }
}

2. 在组件中调用服务并获取数据 #

接下来在组件里注入服务，订阅数据并处理：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService, UserItem } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  userItems: UserItem[] = [];
  errorMsg = '';

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.getUserItems().subscribe({
      next: (items) => this.userItems = items,
      error: (err) => this.errorMsg = '加载数据失败：' + err.message
    });
  }
}

3. 在模板中展示数据 #

用Angular的结构型指令在模板里渲染数据，同时处理加载、错误状态：

<!-- app.component.html -->
<div *ngIf="errorMsg" class="alert alert-danger">{{ errorMsg }}</div>

<div *ngIf="userItems.length; else loading">
  <h3>用户条目列表</h3>
  <ul class="item-list">
    <li *ngFor="let item of userItems" class="item-card">
      <span class="badge">用户ID: {{ item.userId }}</span>
      <span class="badge">条目ID: {{ item.id }}</span>
      <p>{{ item.title }}</p>
    </li>
  </ul>
</div>

<ng-template #loading>
  <p>正在加载数据...</p>
</ng-template>

4. 常见数据处理场景 #

如果你需要对返回的数据做进一步处理，这里给两个实用示例：

按userId分组展示 #

如果要把同一用户的条目归类在一起，可以在组件里手动分组：

// 在AppComponent中添加
groupedItems: { [userId: number]: UserItem[] } = {};

// 订阅数据后处理分组
this.dataService.getUserItems().subscribe(items => {
  this.userItems = items;
  this.groupedItems = items.reduce((groups, item) => {
    const userId = item.userId;
    groups[userId] = groups[userId] || [];
    groups[userId].push(item);
    return groups;
  }, {});
});

模板里嵌套循环渲染分组：

<div *ngFor="let userId of Object.keys(groupedItems)">
  <h4>用户 {{ userId }} 的条目</h4>
  <ul>
    <li *ngFor="let item of groupedItems[userId]">{{ item.title }}</li>
  </ul>
</div>

过滤特定用户的条目 #

比如只展示userId为1的条目：

// 在AppComponent中添加
filteredItems: UserItem[] = [];

// 订阅数据后过滤
this.dataService.getUserItems().subscribe(items => {
  this.filteredItems = items.filter(item => item.userId === 1);
});

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