时间戳

首页 > 解决方案 > 可观察的 fromEvent 不会在角度上激活 detectionChange

angular - 可观察的 fromEvent 不会在角度上激活 detectionChange

问题描述

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

服务：

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>

标签： angularobservable

解决方案

解决了将作业包装在 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
      })
    });
    
  }

谢谢冷冰冰的提示！

推荐阅读