可观察到的fromEvent不会激活检测角度变化 [英] Observable fromEvent do not activate detectionChange on angular

问题描述

几天来我一直在试图解决这个问题:我正在做一个使用角度和电子的应用程序，所以我总是在生产环境中使用角度.我使用电子的ipcMain和ipcRender在主进程和渲染之间进行通信以显示csv文件.问题在于，创建可观察的fromEvent似乎不会触发角度changeDetection.最初，我使用ChangeDetectorRef解决了问题，但这在材质组件上产生了奇怪的行为.为确保不会出错，我从英雄之旅"应用程序中复制了代码，如果可观察对象是([1,2,3])，则一切正常...如果我在fromEvent中更改可观察对象的原点，则不会不再工作了.

I have been trying to solve this problem for days: I'm doing an application that uses angular and electron, so I'm always in the production environment in angular. I use electron's ipcMain and ipcRender to communicate between the main process and the render to display csv files. The problem is that creating an observable fromEvent does not seem to trigger the angular changeDetection. Initially I solved the problem using ChangeDetectorRef but this creates strange behavior on the material components. To be sure not to make a mistake I copied the code from the tour of heroes application, if the observable is of ([1,2,3]) everything works... if I change the origin of the observable in fromEvent it doesn't work anymore.

服务:

export class PresetService {

 constructor(private electronService:ElectronService){}

  read() {
    this.electronService.ipcRenderer.send('read_presets');
  }

  getPresets():Observable<Preset[]> {
    //return of([1,2,3,4]) //this works
    this.read()
    return fromEvent(this.electronService.ipcRenderer,'preset_res').pipe(
      map(_=>_[1]),
      tap(_ => console.log('fetched presets',_))//in the log i see an array of preset objects
    );
  }

}

组件

export class PresetsComponent implements OnInit {

  public presets:any[] //already tried to use observable here and ngFor with async pipe and the behavior was the same
  selected = new FormControl(0);

  constructor(private presesetService:PresetService/*, private cdr: ChangeDetectorRef*/ ) {

  }
  
  ngOnInit() {
    this.getPresets()
  }

  getPresets(): void {
    this.presesetService.getPresets()
    .subscribe(presets => {
      this.presets = presets
      //this.cdr.detectChanges() //if i add this i see all presets but material tabs do not works properly
    });
  }

  addTab(selectAfterAdding: boolean) {
    this.presets.push(new Preset());

    if (selectAfterAdding) {
      this.selected.setValue(this.presets.length - 1);
    }
  }

  removeTab(index: number) {
    this.presets.splice(index, 1);
  }

}

和模板

<div>
  <button mat-raised-button
          class="example-add-tab-button"
          (click)="addTab(selectAfterAdding.checked)">
    Add new Preset
  </button>
  <mat-checkbox #selectAfterAdding> Select preset after adding </mat-checkbox>
</div>

<mat-tab-group [selectedIndex]="selected.value"
               (selectedIndexChange)="selected.setValue($event)">
  <mat-tab *ngFor="let preset of presets; let index = index" [label]="preset.ID">
    Contents for {{preset.ID}}

    <button mat-raised-button
            class="example-delete-tab-button"
            [disabled]="presets.length === 1"
            (click)="removeTab(index)">
      Delete Preset
    </button>
  </mat-tab>
</mat-tab-group>

推荐答案

问题解决了将分配包装在ngZone.run()

Issue solved wrapping the assignment in ngZone.run()

相关代码:

getPresets(): void {
      
    this.presetService.getPresets()//wrap at this level do not solve the issue
    .subscribe(presets => {
      this.zone.run(()=>{
        this.presets = presets //wrapping only this solve the issue
      })
    });
    
  }

感谢冷淡的提示！

这篇关于可观察到的fromEvent不会激活检测角度变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！