ロードだから私は電子+ Angular2のアプリで、次のしているダイアログ

Question

からディレクトリを選択した後Angular2 +電子アプリで非同期画像：

import {Component} from '@angular/core'; 
import * as fs from "fs"; 
import {ImageFile, KeepAction, RetouchAction, PrivateAction, DeleteAction} from "./components/imageFile"; 
import {remote} from 'electron'; 
import { 
    DomSanitizationService, 
     SafeUrl 
} from '@angular/platform-browser'; 
import {Observable} from "rxjs"; 


let dialog = remote.dialog; 

@Component({ 
    selector: 'app', 
    template: ` 
     <button id="openDir" (click)="openDir()">Open</button> 
     <br /> 
     <img id="processingImage" [src]="currentImg | async"/> 
     <br /> 
     <button id="nextImage" (click)="nextImage()">Next Image</button> 
    ` 
}) 

export class AppComponent { 

    dirPath: string; 
    currentImg: Observable<SafeUrl>; 
    fileSet: string[] = []; 
    currentFile: number = 0; 

    constructor(private sanitization: DomSanitizationService) { 
     this.dirPath = ""; 
     this.currentImg = Observable.of<SafeUrl>(null); 
    } 

    /** 
    * <p>Shows a dialog for opening the directory to be processed.</p> 
    * <p>After a directory is selected, it will be analyzed and all images will be loaded to be organized.</p> 
    */ 
    openDir() { 
     dialog.showOpenDialog({defaultPath: 'C:\\', properties: ['openDirectory']}, (fileNames) => { 
      //TODO assert only one file name is present 
      this.dirPath = fileNames[0]; 
      fs.readdir(this.dirPath, (e, f) => this.loadFiles(e, f)); 
     }); 
    } 

    nextImage() { 
     if (this.currentFile < this.fileSet.length - 1) { 
      this.currentFile++; 
      this.setSanitizedCurrentImage(); 
     } 
    } 

    setSanitizedCurrentImage(){ 
     let currentPath = this.fileSet[this.currentFile]; 
     this.currentImg = Observable.of(this.sanitization.bypassSecurityTrustUrl(currentPath)); 
    } 

    loadFiles(err: NodeJS.ErrnoException, files: string[]): void { 
     this.fileSet = []; 
     this.currentFile = 0; 

     files.forEach((it) => { 
      var filePath = this.dirPath + '/' + it; 

      if (fs.statSync(filePath).isFile()) { 
       this.fileSet.push(filePath); 
      } 
     }); 
     this.setSanitizedCurrentImage(); 
    } 

} 

[開く]ボタンを押すと、ダイアログが表示されたら、私はディレクトリを選択し、 setSanitizedCurrentImage()で最初の画像をロードしようとすると、開いた画像ではなくnextImageで動作します。

私はそれが非同期メソッドshowOpenDialog()またはshowOpenDialog()によると思いますが、現在のイメージ値を更新することができませんでした。

Answer 1

Promiseを使用してこれを解決し、showOpenDialogとreaddirの両方のコールバックを実行した後で解決できました。

TLDR：

openDir() { 
     new Promise((resolve, reject) => { 
      dialog.showOpenDialog({defaultPath: 'C:\\', properties: ['openDirectory']}, (fileNames) => { 
       //TODO assert only one file name is present 
       this.dirPath = fileNames[0]; 
       fs.readdir(this.dirPath, (e, f) => { 
        this.loadFiles(e, f); 
        resolve(); 
       }); 
      }) 
     }).then(() => this.setSanitizedCurrentImage()); 
    } 

全コード：私はそれは `this.fileSet [this.currentFile]の状態とは何かを持っているかもしれないと思う

import {Component} from '@angular/core'; 
import * as fs from "fs"; 
import {ImageFile, KeepAction, RetouchAction, PrivateAction, DeleteAction} from "./components/imageFile"; 
import {remote} from 'electron'; 
import { 
    DomSanitizationService, 
     SafeUrl 
} from '@angular/platform-browser'; 
import {Observable} from "rxjs"; 


let dialog = remote.dialog; 

@Component({ 
    selector: 'app', 
    template: ` 
     <button id="openDir" (click)="openDir()">Open</button> 
     <br /> 
     <img id="processingImage" [src]="currentImg | async"/> 
     <br /> 
     <button id="nextImage" (click)="nextImage()">Next Image</button> 
    ` 
}) 

export class AppComponent { 

    dirPath: string; 
    currentImg: Observable<SafeUrl>; 
    fileSet: string[] = []; 
    currentFile: number = 0; 

    constructor(private sanitization: DomSanitizationService) { 
     this.dirPath = ""; 
     this.currentImg = Observable.of<SafeUrl>(null); 
    } 

    /** 
    * <p>Shows a dialog for opening the directory to be processed.</p> 
    * <p>After a directory is selected, it will be analyzed and all images will be loaded to be organized.</p> 
    */ 
    openDir() { 
     new Promise((resolve, reject) => { 
      dialog.showOpenDialog({defaultPath: 'C:\\', properties: ['openDirectory']}, (fileNames) => { 
       //TODO assert only one file name is present 
       this.dirPath = fileNames[0]; 
       fs.readdir(this.dirPath, (e, f) => { 
        this.loadFiles(e, f); 
        resolve(); 
       }); 
      }) 
     }).then(() => this.setSanitizedCurrentImage()); 
    } 

    nextImage() { 
     if (this.currentFile < this.fileSet.length - 1) { 
      this.currentFile++; 
      this.setSanitizedCurrentImage(); 
     } 
    } 

    setSanitizedCurrentImage(){ 
     let currentPath = this.fileSet[this.currentFile]; 
     this.currentImg = Observable.of(this.sanitization.bypassSecurityTrustUrl(currentPath)); 
    } 

    loadFiles(err: NodeJS.ErrnoException, files: string[]): void { 
     this.fileSet = []; 
     this.currentFile = 0; 

     files.forEach((it) => { 
      var filePath = this.dirPath + '/' + it; 

      if (fs.statSync(filePath).isFile()) { 
       this.fileSet.push(filePath); 
      } 
     }); 
    } 

}