Обнаружение изменений не вызвано каким-либо событием

Question

У меня есть компонент, который subscribes для Observable из service, Когда observable испускает его next оценить некоторые изменения, произошедшие в моем компоненте. Странно то, что компонент будет или не будет обновлять представление в зависимости от того, как next значение было сгенерировано. Если я правильно понимаю, некоторые события были исправлены углами 2, чтобы вызвать обнаружение изменений, а некоторые - нет. MIDI-события являются одними из тех, которые не имеют (что имеет смысл).

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

Если служба ищет события клавиатуры одинаково, происходит обнаружение изменений.

Однако, когда служба использует событие MIDI, обнаружение изменений не происходит.

Вот некоторый код:

export class App {

  arr = [
      {id: 1, status: false},
      {id: 2, status: false},
      {id: 3, status: false}
    ];

  thing = new Subject<boolean>();

  constructor(private renderer: Renderer,
              private ser:Ser,
              private midi: MidiService) {}

  ngOnInit(){
    // listening to click events, will trigger change detection
    this.renderer.listenGlobal('document', 'click', (event) => {
      console.log("Left click", event);
      this.thing.next(1);
    });
    this.thing.subscribe( v => this.toggle(v));
    // my midi service events will call the toggle method however the 
    // changes won't be displayed in the view
    this.midi.notesPayed$.subscribe(v => this.toggle(v));
  }

А вот и плнкр:

https://plnkr.co/edit/SS6jwgQg4TVdOCC05cNV?p=preview

Я не уверен, является ли это ошибкой или особенностью, лежащей в основе Angular 2. В любом случае я хотел бы знать, почему это происходит. Конкретную проблему легко решить, вызвав обнаружение изменений самостоятельно, поэтому мне не нужно решение.

Answer 1

Это известное поведение. API-интерфейс MIDI не распространяется на zone.js, и поэтому Angulare не получает уведомления о запуске обнаружения изменений.

Либо вводить zone:NgZone и обернуть код, который меняет модель с this.zone.run(() => {...})

или ввести cdRef:ChangeDetectorRef и вызвать обнаружение изменений после изменения, вызвав this.cdRef.detectChanges()