ng-bootstrap模态中的变量不会立即更新

Question

问题是变量值（fileSize，filePath）不会立即更新，只有在我点击模态时才会更新。

由于我使用电子，我已经使用方法detectChanges()

触发了变化检测

但是只有当我点击模态时才会更新变量。

以下是组件的代码

import { Component, OnInit , ViewChild , ElementRef, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { Http } from '@angular/http';

import { NgbActiveModal, NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'
import { ipcRenderer, remote } from 'electron';

@Component({
   selector: 'new-download-details',
   templateUrl: './new-download-details.html',
   styleUrls: ['./new-download-details.scss']
  })
export class NewDownloadDetails implements OnInit {

@ViewChild('newdownloaddetail') modal: ElementRef;
@Output() onAddDownload = new EventEmitter<FileModel>();

download_detail_modal : any;

url_d = '';
fileSize = 0;
fileName = '';
filePath = '';

constructor(public modalService: NgbModal, public httpService: Http, public cdrf: ChangeDetectorRef){

}

public ngOnInit() {

}

public showNewDownloadDetail(url: string){

    this.fileName = url.split('/').pop();        
    this.url_d = url;

    // send head request to electron
    ipcRenderer.send('download-prompt', url);
    ipcRenderer.on('download-prompt-detail',(event,data)=>{

            // getting file size 
            this.fileSize = data['content-length'] ;
            this.cdrf.detectChanges();
            console.log(this.fileSize);

    });

    this.download_detail_modal = this.modalService.open(this.modal);         

}


folderChoose(){
    console.log("folder chose");
    let dialog = remote.dialog;
    dialog.showOpenDialog({title: "Save File To ", 
                            properties: ['openDirectory', 'createDirectory'] },
                            (filePaths: string[])=>{
                                console.log("File Path : " + filePaths[0]);
                                this.filePath = filePaths[0];

                            }
                        );
}

addDownload(){
    this.onAddDownload.emit(new FileModel(this.url_d,this.fileName, this.filePath));
    this.download_detail_modal.close();
}
}

class FileModel{
  constructor(public url:string, public fileName:string, public filePath:string){

  }
}

以下是模态

的代码

      <!-- code for modal  -- >
     <!-- New Download Detail modal -->
     <ng-template #newdownloaddetail let-c="close" let-d="dismiss">
            <div class="modal-header">
                <h4 class="modal-title">Downloading</h4>
                <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">

                    <form>
                            <div class="container">
                              <div class="row">
                                  <div class="col-3">
                                    <div for="formGroupExampleInput">URL</div>
                                  </div>
                                  <div class="col-9">
                                    <input type="text" class="form-control" id="formGroupExampleInput" [(ngModel)]="url_d" name="url_d"  placeholder="{{ url_d }}">
                                  </div>
                              </div>
                              <div class="row">
                                    <div class="col-3">
                                      <div for="formGroupExampleInput">File Name</div>
                                    </div>
                                    <div class="col-9">
                                      <input type="text" class="form-control" id="formGroupExampleInput" [(ngModel)]="fileName" name="fileName"  placeholder="{{ fileName }}">
                                    </div>
                                </div>

                                <div class="row">
                                        <div class="col-3">
                                          <div for="formGroupExampleInput">Path</div>
                                        </div>
                                        <div class="col-9">
                                          <input type="text" class="form-control" id="formGroupExampleInput" (click)="folderChoose()" [(ngModel)]="filePath" name="filePath"  placeholder="{{ filePath }}">
                                        </div>
                                </div>
                            </div>
                          </form>
                    {{ fileSize | byteFormat  }}
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark" (click)="addDownload()">Download</button>
              </div>
          </ng-template>

点击模态之前模态的屏幕截图

点击模态后的模态截图

您认为问题是什么？

编辑：更新变量的代码在showNewDownloadDetail()

Answer 1

试试这个：

addDownload(){
            this.onAddDownload.next(new FileModel(this.url_d,this.fileName, this.filePath));
            this.download_detail_modal.dismiss();
        }


this.download_detail_modal = this.modalService.open(this.modal)
            this.download_detail_modal.componentInstance.onAddDownload.subscribe((e) => {
                console.log('e', e);
            });     

Answer 2

使用NgZone

修正了它

 ipcRenderer.on('download-prompt-detail',(event,data)=>{

        // use NgZone
        this.zone.run(()=>{

        this.fileSize = data['content-length'] ;

       }
});