时间戳

首页 > 解决方案 > distinctUntilKeyChanged() 是如何工作的？

angular - distinctUntilKeyChanged() 是如何工作的？

问题描述

在我的角度组件中，我有一个购物车项目列表，可以使用上面的输入（每个项目都有自己的输入）进行修改(change)=onChange($event, cartItem)。onChange()正在将修改金额的 cartItem 推到Subject. 每个项目的类型：

export class CartItemOutput {
  user_id: number;
  item_id: number;
  amount: number;
  price: number;
  item_name: string;
  photo: string;
}

如果有一个购物车项目在一段时间前最后修改（现在是 500 毫秒）并且修改没有导致相同的数量，我只想进行 API 调用。在我的ngOnInit()我有：

  ngOnInit(): void {
    this.subject
      .pipe(
        debounceTime(500),
        distinctUntilKeyChanged("amount")
        )
      .subscribe((data: CartItemOutput) => {
        //log modified item
        console.log(data);
      });
  }

如果我删除distinctUntilKeyChanged("amount")所有内容都按预期工作，并且购物车项目只有在最后 500 毫秒内未修改时才会登录到控制台。但是我不想记录项目的数量是否被修改，例如从 2 到 1 并返回到 2。问题是，distinctUntilKeyChanged("amount")该项目只记录一次。

编辑

经过进一步检查，我发现当我改变时：

.pipe(
        debounceTime(2000),
        distinctUntilKeyChanged('amount')
        )

进入

.pipe(
        debounceTime(2000),
        distinctUntilChanged((p,q) => {
          console.log(p);
          console.log(q);
          return p.amount == q.amount
        })
        )

编辑同一个项目时，两个值 p 和 q 完全相同（当我编辑 id 为 2 的项目并将其数量更改为假设为 7 时，p 和 q 的数量均为 7）。然后当我编辑不同的项目时，p 和 q 不同并data登录到控制台。

标签： angularrxjs

解决方案

感谢Clashsoft和fridoo的评论，我设法让它工作。我错误地将新价值观推向了主题。我的代码看起来像这样：


  onChange(event: any, cartItem: CartItemOutput) {
    
    cartItem.amount = parseInt(event.target.value);
    this.subject.next(cartItem);
  }

其中 cartItem 是输入编辑的项目。next()就像 Clashsoft 所说的那样，将它传递给函数会导致上一个和下一个项目相同。

现在我的代码如下所示：

  onChange(event: any, cartItem: CartItemOutput) {
    cartItem.amount = parseInt(event.target.value);
    this.subject.next({...cartItem, amount: parseInt(event.target.value)});
  }

一切正常distinctUntilKeyChanged('amount')。

推荐阅读