为什么我的值没有在 init (Angular + Electron) 上更新？

Question

setting.component.ts

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

@Component({
  selector: 'app-setting',
  templateUrl: './setting.component.html',
  styleUrls: ['./setting.component.css']
})
export class SettingComponent implements OnInit {
  private primaryServer: string;
  private secondaryServer: string;

  constructor(
    private electron: ElectronService
  ) { }

  ngOnInit() {
    this.electron.ipcRenderer.send("asynchronous-message", {get: "settings"})
    this.electron.ipcRenderer.on("asynchronous-reply", (event, data) => {
      this.primaryServer = data.database.primary;
      this.secondaryServer = data.database.secondary;
    })
  }
}

setting.component.html

<p>{{primaryServer}}</p>
<p>{{secondaryServer}}</p>

当页面加载时，我的“primaryServer”和“secondaryServer”值不显示。但是，当我单击输入或随机按钮时，它会显示出来。如何让它们出现在 init 上？

Answer 1

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

@Component({
  selector: 'app-setting',
  templateUrl: './setting.component.html',
  styleUrls: ['./setting.component.css']
})
export class SettingComponent implements OnInit {
  private primaryServer: string;
  private secondaryServer: string;

  constructor(
    private electron: ElectronService,
    private zone: NgZone
  ) { }

  ngOnInit() {
    this.electron.ipcRenderer.send("asynchronous-message", {get: "settings"})
    this.electron.ipcRenderer.on("asynchronous-reply", (event, data) => {
      this.zone.run(()=>{
        this.primaryServer = data.database.primary;
        this.secondaryServer = data.database.secondary;
      })
    })
  }
}

这是我为使其正确更新所做的更改，如

所述

您的代码可能在 Angulars 区域之外运行，因此 Angular 无法识别它需要运行更改检测。您可以使用 zone.run(() => {您在此处更新模型的代码 }) 强制代码返回区域。如果这可行，您可以进一步调查为什么它在 Angulars 区域之外运行。 – Günter Zöchbauer