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

Question

我是 Angular 7 中 rxjs 的新手，我有一个返回用户详细信息的 api。我想删除具有相同名称的对象，我几乎没有使用 distinctUntilKeyChanged() 尝试它，但在控制台中获得的输出与从 api 相同回复。我也可以直接使用从服务返回的数据，因为响应已经是使用接口的 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: "[e-mail]", email_verified_at: null, type: "admin"},
{id: 3, name: "Ellaware", email: "[e-mail]", email_verified_at: null, type: "user"},
{id: 17, name: "alshoja", email: "[e-mail]", email_verified_at: null, type: "user"}
]

期望输出为

[
{id: 2, name: "alshoja", email: "[e-mail]", email_verified_at: null, type: "admin"},
{id: 3, name: "Ellaware", email: "[e-mail]", email_verified_at: null, type: "user"},
]

标签： angulartypescriptrxjsangular7rxjs6

Answer 1

您对如何distinctUntilKeyChanged和distinctUntilChanged工作的想法是不正确的。根据文档

• distinctUntilKeyChanged仅在指定的键值更改时发出。（来源：文档）
• distinctUntilChanged仅在当前值与上一个不同时发出。（来源：文档）

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

[
  { id: 3, name: "Ellaware", email: "[e-mail]", email_verified_at: null, type: "user" },
  { id: 2, name: "alshoja", email: "[e-mail]", email_verified_at: null, type: "admin" },
  { id: 17, name: "alshoja", email: "[e-mail]", 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);
}