Question

我目前正在使用Angular 2和Electron（基本上使用Node和web技术来创建GUI）。

我想要做的就是列出当前目录的文件。

不幸的是，变量“this.files”似乎没有更新UI上显示的数据。然而令人惊讶的是，当我点击链接到空方法的虚拟按钮时，它会突然更新。我该如何解决这个问题并解决这个问题？

import {Component} from "@angular/core";
const fs = require('fs');

@Component(<any>{
    selector: 'files',
    template: `
<h2>Files</h2>

<ul *ngFor="let file of files">
    <li>{{ file }}</li>
</ul>

<button (click)="showFiles">Show Files</button>
`,
})
export class FilesComponent {
    files: any[];
    cwd: string;

    constructor() {}

    ngOnInit() {
        this.cwd = __dirname;
        this.files = [];
        this.loadFiles();
    }

    loadFiles() {
        fs.readdir(this.cwd, (err, dir) => {
            for (let filePath of dir) {
                console.log(filePath);
                this.files.push(filePath);
            }
        });
    }

    showFiles() {
        // Empty method
        // Shows the files for some reason despite nothing happening
    }
}

Answer 1

这可能是由export class FilesComponent { constructor(private cdRef:ChangeDetectorRef) {} loadFiles() { fs.readdir(this.cwd, (err, dir) => { for (let filePath of dir) { console.log(filePath); this.files.push(filePath); } this.cdRef.detectChanges(); }); } }引起的。它似乎使用的是未经Angulars区域修补的API。要解决此问题，您可以使用

{{1}}

Answer 2

这是您的另一种选择，因为对于我的用例而言，可接受的答案不起作用...基本上fs在Angular区域之外运行，因此您需要在ngZone内分配变量。

注意：根据实际情况，您实际上可能不需要手动运行更改检测。

import {Component, NgZone, ChangeDetectorRef} from "@angular/core";
const fs = require('fs');

@Component(<any>{
    selector: 'files',
    template: `
<h2>Files</h2>

<ul *ngFor="let file of files">
    <li>{{ file }}</li>
</ul>

<button (click)="showFiles">Show Files</button>
`,
})
export class FilesComponent {
    files: any[];
    cwd: string;

    constructor(
      private cd: ChangeDetectorRef,
      private zone: NgZone
    ) {}

    ngOnInit() {
        this.cwd = __dirname;
        this.files = [];
        this.loadFiles();
    }

    loadFiles() {
        fs.readdir(this.cwd, (err, dir) => {
            var newFiles = [];
            for (let filePath of dir) {
                console.log(filePath);
                newfiles.push(filePath);
            }
            this.zone.run(() => {
              this.files = newFiles;
              // NOTE: you may be able to delete this next line depending on your use case
              this.cd.detectChanges();
            })
        });
    }

    showFiles() {
        // Empty method
        // Shows the files for some reason despite nothing happening
    }
}

在对Node中的变量/模型进行更改时，Angular 2不会更新UI

2 个答案: