角度-模型更改后電子視圖不會更新

Question

我有一個使我能夠從電子對話框中選擇文件夾的字段。 單擊該字段后，對話框打開，我可以選擇該文件夾。 但是，單擊“確定”后，即使我的模型包含文件夾的路徑，它也不會反映在輸入字段中，直到我單擊“字段外”（失去焦點時）。 我如何確切地解決此問題？

模板包含：

<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];
                }
            });

        }

Answer 1

注意-這幾乎是該問題的重復部分，因為它可以幫助我解決問題，所以我將發布答案。

電子對話框似乎在角度區域之外起作用，因此對數據的任何更新都不會觸發角度來刷新視圖。

為了進行刷新，我必須在如下區域中執行邏輯：

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
                }

            });

        }