Как отлаживать Rx JS / Angular? Просмотр не обновляется при выдаче нового значения - PullRequest
Новая
       11

Как отлаживать Rx JS / Angular? Просмотр не обновляется при выдаче нового значения

0 голосов
/ 09 июля 2020

Я действительно бьюсь головой об стену этим ...: - \

У меня есть тупой компонент, который с @Input() получает массив: 

export class ChildComponent implements OnChanges {

  @Input() items: Item[];

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges fired:', changes['items'].currentValue.length)
  }
}

Родительский компонент передает массив дочернему компоненту через привязку шаблона и async канал: 

<h1>Parent Component</h1>

<child [items]="items$ | async"></child>

Я понимаю, что изменения должны автоматически обнаруживаться при использовании канала async с @Input(), позволяя обрабатывать их в хуке жизненного цикла ngOnChanges.

Это правильно?

Однако ngOnChanges не запускается в дочернем компоненте когда items$ испускает новое значение.

У меня есть класс DataStore, который поддерживает этот наблюдаемый массив элементов. По мере получения новых элементов он генерирует новый массив (неизменяемый) и проталкивает его через наблюдаемый items$. Однако в дочернем компоненте изменений не обнаружено. Если я немного щелкну по странице, в конечном итоге сработает обнаружение изменений, и оно обновится. там отлично работает !!!!

Итак, я знаю, что мой реальный код отличается от упрощенного примера, но мне не удалось его отследить.

Вот почему мой вопрос:

Как отлаживать Rx JS / Angular?

  • Я добавил логирование в items$ внутри родительский компонент, и я вижу, что новые значения поступают нормально, но дочерний компонент их не получает. Я вижу, что ngOnChanges не запускается в дочернем компоненте.

  • Я подумал, что, возможно, наблюдаемая ссылка items$ где-то переназначалась, оставляя шаблон с подпиской на наблюдаемый, который на самом деле не получает новых выбросов, поэтому я сделал @Input() геттером / сеттером, который мог бы отслеживать каждый раз, когда он был установлен, и это происходит только один раз.

  • I пытался изменить дочерний компонент, чтобы использовать стратегию обнаружения изменений OnPush, но это не дало результата.

Я в тупике ...

Любые предложения о том, как Я могу отследить свою проблему?

Спасибо! : -)

1 Ответ

1 голос
/ 09 июля 2020

Убедитесь, что наблюдаемый объект излучает, поместив {{ items$ | async | json }} в родительский компонент где-то рядом с дочерним. Вы, вероятно, обнаружите, что items $ не испускает значений, если бы это было так, дочерний элемент будет обновлен.

Вы изменяете текущий массив и повторно отправляете тот же экземпляр? Когда вы изменяете массив, убедитесь, что вы создали новый массив с помощью оператора распространения, map или filer, а не pu sh, и выталкивая значения, а затем наблюдаемый объект испускает тот же экземпляр массива с измененными данными. Убедитесь, что вы испускаете новый экземпляр массива, не изменяйте старый.

Не имеет отношения к вашему вопросу, но я предпочитаю использовать свойства установщика поверх OnChanges 

export class ChildComponent {
  items: Item[];
  @Input('items')
  set itemsSet(items: Item[]) {
    this.items = items;
    console.log('items set:', items.length);
  }
}
...