проблема обновления углового компонента в IPC-коммуникации между задней и передней панелями

Question

У меня есть приложение Electron (6) / Angular (8).Спереди (Angular) я отправляю сообщение через IPCRenderer на заднюю часть.В конце, IPCMain получает сообщение и выполняет необходимые операции, в этом примере получает список файлов.задняя часть отправляет файлы по одному на фронт (опять же, IPC).
Фронт получает сообщения, когда я "console.log" каждый файл, как я их получаю.

НО, какЯ заполняю массив файлами, он не будет отображаться в компоненте, пока я не нажму на страницу.

Есть идеи, что я делаю неправильно?

в main.ts:

ipcMain.on('get-files', (event, data) => {
      const path = data;
      fs.readdir(path, (err, files) => {
        files.forEach(file => {
          this.log.info(file);
          event.reply('new-file', file);
        });
      });
    });

file.service.ts:

import { Injectable } from '@angular/core';
import { ElectronService } from 'ngx-electron';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class FilesService {
  public _file: BehaviorSubject<any> = new BehaviorSubject(null);

  constructor(private els: ElectronService) {}

  setFile(value) {
    if (value) {
      this._file.next(value);
    }
  }

  listfiles(path: string): Observable<string[]> {
    const result = new Observable<string[]>(observer => {
      const files = this.els.ipcRenderer.sendSync('listfiles', { path });
      observer.next(files);
    });
    return result;
  }

  getFiles(path: string) {
    this.els.ipcRenderer.send('get-files', path);
  }
}

в test.component.ts:

import { Component, OnInit } from '@angular/core';
import { ElectronService } from 'ngx-electron';

import { ProjectsService } from '../../services/projects.service';
import { FilesService } from './../../services/files.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {
  constructor(private fileService: FilesService, private projectService: ProjectsService, private els: ElectronService) {}

  files = [];
  sPath = 'c:\\';

  ngOnInit() {
    this.fileService._file.subscribe(file => {
      if (file) {
        this.files.push(file);
      }
    });

    this.els.ipcRenderer.on('new-file', (event, file) => {
      console.log(file);
      this.fileService.setFile(file);
    });
  }

  sendMsg() {
    console.log('sendMsg');
    this.files = [];
    /* this.fileService.listfiles(this.sPath).subscribe(result => {
      this.files = result;
    }); */
    this.fileService.getFiles(this.sPath);
  }

  newProject() {
    console.log('newProject');
    this.projectService.createProject('test.pj4').subscribe(result => {
      console.log(result);
    });
  }
}

в test.component.html:

<div id="test">
  <div class="divbtn">
    <button class="xx" mat-raised-button color="primary" (click)="sendMsg()">Test</button>
  </div>
  <div class="divbtn">
    <button class="xx" mat-raised-button color="primary" (click)="newProject()">New Project</button>
  </div>

  <div *ngIf="files.length > 0">
    <p *ngFor="let file of files">{{file}}</p>
  </div>
</div>

Answer 1

Импорт NgZone в классе, где вы подписываетесь на события и используете метод run.Я не использовал IPC, но для push-событий из бэкенда он работал

this.els.ipcRenderer.on('new-file', (event, file) => {
  console.log(file);
  this.ngZone.run(() => this.fileService.setFile(file));
});