angular - 我可以使用 distinctUntilKeyChanged 来删除重复的对象吗？

Question

我是 Angular 7 中 rxjs 的新手，我有一个返回用户详细信息的 api。我想删除具有相同名称的对象，我几乎没有尝试使用 distinctUntilKeyChanged() 但在控制台中获得的输出与来自 api 响应。我也可以直接使用服务返回的数据，因为响应已经是一个使用接口(interface)的 Observable，而无需在组件中使用 From() 或 0f()。

这是针对 angular 7 和 Rxjs 6 的，我已经使用 angular 一年了，但我直到现在才使用 Rxjs，我在 Rxjs 中遇到很多困惑，我可以直接在组件中使用来自服务的 Http 响应，否则我想使用任何运算符将响应转换为流吗？我可以直接在组件中使用 Json 响应来使用不同的运算符，如 find()、first()、ignoreElements 等...

用户服务.ts

  private urlLara = 'http://laravel.technalatus.com/public/api/'
  public getusers(): Observable<User> {
    const head = new HttpHeaders({
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    })
    return this.http.get<User>(this.urlLara + 'users', { headers: head 
    });
  }

组件.ts

export class AppComponent implements OnInit {
  title = 'angularrxjs';
  items: {};
  post: Post;
  user: User;
  public searchTerm: string;

  constructor(private UserService: UserService) {

  }

  ngOnInit() {
    this.distinct()
  }

  public Duchanged() {
    // custom compare for name
    this.UserService.getusers().pipe(distinctUntilChanged((prev, curr) => prev.name === curr.name))
      .subscribe(console.log);

  }

获取输出为

[
{id: 2, name: "alshoja", email: "alshoja@gmail.com", email_verified_at: null, type: "admin"},
{id: 3, name: "Ellaware", email: "abhi@gmail.com", email_verified_at: null, type: "user"},
{id: 17, name: "alshoja", email: "c@g.com", email_verified_at: null, type: "user"}
]

期望输出为

[
{id: 2, name: "alshoja", email: "alshoja@gmail.com", email_verified_at: null, type: "admin"},
{id: 3, name: "Ellaware", email: "abhi@gmail.com", email_verified_at: null, type: "user"},
]

Answer 1

您对 distinctUntilKeyChanged 和 distinctUntilChanged 工作原理的看法是不正确的。根据文档

• distinctUntilKeyChanged only emits when the specified key value has changed. (Source: docs)
• distinctUntilChanged only emits when the current value is different than the last. (Source: docs)

由于在每个对象中 name 都从最后一个对象更改，因此每次都会发出。在您的情况下，distinctUntilKeyChanged 或 distinctUntilChanged 仅在您的“不同”项目按如下顺序排列时才有效

[
  { id: 3, name: "Ellaware", email: "abhi@gmail.com", email_verified_at: null, type: "user" },
  { id: 2, name: "alshoja", email: "alshoja@gmail.com", email_verified_at: null, type: "admin" },
  { id: 17, name: "alshoja", email: "c@g.com", email_verified_at: null, type: "user" }
]

您可以使用 distinct 代替

import { distinct, toArray } from 'rxjs/operators';

public Duchanged() {
  this.UserService.getusers()
  .pipe(
    distinct(user => user.name),
    toArray()
  )
  .subscribe(console.log);
}