node.js - 在更改 Node 中的变量/模型时，Angular 2 不会更新 UI

Question

我目前正在使用 Angular 2 和 Electron(它基本上是使用 Node 和网络技术来创建 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

这可能是由 fs.readdir 引起的。它似乎正在使用 Angulars 区域未修补的 API。要变通，您可以使用

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