Angular - 模型更改后电子视图不更新答案

【问题标题】：Angular - electron view does not update after model changesAngular - 模型更改后电子视图不更新
【发布时间】：2019-02-28 02:04:21
【问题描述】：

我有一个字段可以让我从电子对话框中选择一个文件夹。单击该字段时，对话框打开，我可以选择文件夹。但是，点击确定后，即使我的模型包含文件夹的路径，它也不会反映在输入字段中，直到我单击字段外（当它失去焦点时）。我究竟该如何解决这种行为？

模板包含：

<input type="text" class="form-control" (click)="onClickPath($event)" [(ngModel)]="currentConfiguration.workspacePath" id="workspace-path" name="workspace-name" aria-label="workspace" aria-describedby="workspace-lable">

CurrentConfiguration.ts

export class CurrentConfiguration {
    workspacePath: string;
}

configuation.component.ts

currentConfiguration: CurrentConfiguration = {
        workspacePath: ""
    };

//onClickedPath event: 

    onClickPath(event) {
            console.log("clicked: ", event.target.id);

            // open the dialog to select the directory
            const dir = this.electronService.remote.dialog.showOpenDialog({
                properties: ["openDirectory"],
                title: event.target.id.split('-').join(" ")
            }, (folderPath) => {
                console.log(folderPath);

                if (folderPath[0] == undefined) {
                    this.electronService.remote.dialog.showMessageBox({
                        type: "error",
                        buttons: ["ok"],
                        title: "Error",
                        message: "Please select the folder"

                    });
                }
                else{
                    // set the correct directoryPath. 
                    this.currentConfiguration[event.target.id.split('-')[0] + 'Path'] = folderPath[0];
                }
            });

        }

【问题讨论】：

您可以尝试注入 changeDetectorRef 并调用detectesChanges : angular.io/api/core/ChangeDetectorRef 强制角度开始一个新的摘要循环
@xrobert35 不需要，除非某些东西不在角度范围内
是的，没错，但由于一切看起来都是最新的，而且视图只是在事件发生后才发生变化，这看起来像是一个变化检测问题。而且我不知道这个电子服务是什么代码，也许它在角度范围之外运行
@xrobert35 - 我做了更多研究，看来您确实是正确的。 This answer 帮助我解决了我的问题。

标签： javascript angular typescript electron angular6

【解决方案1】：

注意 - 这几乎是 This question 的骗局，因为它帮助我解决了问题，所以我会发布答案。

电子对话框似乎在角度区域之外起作用，因此对数据的任何更新都不会触发角度来刷新视图。

为了使刷新发生，我必须在如下区域内执行逻辑：

import { NgZone } from '@angular/core';
...
...
currentConfiguration: CurrentConfiguration = {
        workspacePath: ""
    };

//onClickedPath event: 

    onClickPath(event) {
            console.log("clicked: ", event.target.id);

            // open the dialog to select the directory
            const dir = this.electronService.remote.dialog.showOpenDialog({
                properties: ["openDirectory"],
                title: event.target.id.split('-').join(" ")
            }, (folderPath) => {
                console.log(folderPath);

                if (folderPath[0] == undefined) {
                    this.electronService.remote.dialog.showMessageBox({
                        type: "error",
                        buttons: ["ok"],
                        title: "Error",
                        message: "Please select the folder"

                    });
                }
                else{
                   // run all of this inside the zone
                   this.zone.run(() => {
                    // set the correct directoryPath. 
                    this.currentConfiguration[event.target.id.split('-')[0] + 'Path'] = folderPath[0];
                    }); // end of zone
                }

            });

        }

【讨论】：