Угловой - электронный вид не обновляется после изменения модели - PullRequest
Новая
       33

Угловой - электронный вид не обновляется после изменения модели

0 голосов
/ 24 сентября 2018

У меня есть поле, которое позволяет мне выбрать папку из электронного диалога.При нажатии на поле открывается диалоговое окно, и я могу выбрать папку.Однако после нажатия «ОК», хотя моя модель содержит путь к папке, она не отражается в поле ввода, пока я не нажму ВНЕ поле (когда она потеряет фокус).Как именно я могу исправить это поведение?

Шаблон содержит: 

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

        }

1 Ответ

0 голосов
/ 25 сентября 2018

Примечание - это почти обман Этот вопрос Поскольку это помогло мне решить проблему, я выложу ответ.

Электронные диалоги кажутсядля работы вне угловой зоны и, следовательно, любые обновления данных не запускают угловые для обновления представления.

Чтобы выполнить обновление, мне пришлось выполнить логику внутри зоны, как показано ниже: 

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
                }

            });

        }
...