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

Question

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

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

user.service.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 
    });
  }

component.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

distinctUntilChanged 运算符将忽略来自流的完全相同的新结果，这里你有一个只有一个结果的流，它是用户数组。

您应该做的是使用 map 运算符并使用数组 filter 从数组中删除重复项。

this.UserService.getusers().pipe(
   map((users) => users.filter((v,i) => users.indexOf(v) === i))
   .subscribe(console.log);

Answer 2

您关于 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 仅在您的 "distinct" 项按如下顺序排列时才有效

[
  { 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);
}

Answer 3

distinctUntilChanged -> It will check only current and prev object.Before passing the JSON ,You should sort based on name then use distinctUntilChanged();
the result of this.UserService.getusers() should be like this:
[
{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"},
{id: 3, name: "Ellaware", email: "abhi@gmail.com", email_verified_at: null, type: "user"}

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

Can i use distinctUntilKeyChanged for removing duplicate objects?

rxjs

typescript

angular

rxjs6

angular7