Как работает отличнаяUntilKeyChanged ()? - PullRequest
Новая
       5

Как работает отличнаяUntilKeyChanged ()?

0 голосов
/ 19 июня 2020

В моем компоненте angular у меня есть список элементов корзины, которые можно изменить с помощью входов (каждый элемент имеет свой собственный вход), в котором есть (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;
}

Я хочу выполнять вызовы API только в том случае, если есть элемент корзины, который последний раз изменялся некоторое время go (сейчас это 500 мс), и изменение не привело к то же количество. В моем 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") элемент регистрируется только один раз.

EDIT

При дальнейшем осмотре я обнаружил, что когда я изменил: 

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

на 

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

Два значения p и q точно такие же при редактировании одного и того же элемента (Когда я редактирую элемент с идентификатором, например 2, и измените его количество, скажем, 7, и p, и q имеют количество 7). Затем, когда я редактирую другой элемент, p и q разные, и data регистрируется в консоли.

1 Ответ

0 голосов
/ 20 июня 2020

Благодаря комментариям 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').

...