Angular 2 Change Erkennungsproblem mit rekursiver Funktion

Question

Ich habe ein seltsames Problem mit Angular 2 Change Detection bei Verwendung einer rekursiven Funktion zum Lesen von Benutzer ziehen & abgelegte Dateien.

Siehe zum Beispiel hier:

File drop example: plnkr.co

In dem obigen Beispiel gibt es zwei Dateiablagebereiche. Der obere Bereich verwendet eine rekursive Funktion, um alle Dateien in vom Benutzer gelöschten Elementen zu lesen. Im unteren Bereich verwenden Sie einfach dataTransfer.files.

Die gelöschten Dateien sollen unten angezeigt werden. Die Änderungserkennung funktioniert jedoch nur für den unteren Ablagebereich.

Dies ist eine vereinfachte Version meiner tatsächlichen Anwendung. Ich bin nicht scharf darauf, ChangeDetectorRef zu verwenden, um die Entdeckung auszulösen (ich weiß, dass es für das Beispiel des Plunkers funktioniert).

Gibt es eine bessere Möglichkeit, alle Dateien (einschließlich Dateien in Unterordnern) mit webkitGetAsEntry() zu lesen? Oder ein anderer Weg funktioniert mit Angular Change Detection?

Ich bin auf Angular 2.4.9. Danke für die Hilfe.

Answer 1

Ersetzen Sie den Code in app.ts mit dem Code unten und es wird funktionieren. Zone.js erkennt Änderungen, nachdem der Rückruf ausgeführt wurde.

//our root app component 
import {Component, NgModule,NgZone} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import { FileDropDirective } from './file.drop.directive' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <div file-drop class="drop-area" readAsItems="yes" 
     (droppedFiles)="onFilesDrop($event)">Recursive func</div> 
     <div file-drop class="drop-area" 
     (droppedFiles)="onFilesDrop($event)">Non-recursive func</div> 
     <div *ngFor="let f of files">{{ f }}</div> 
    </div> 
    `, 
    styles: [` 
    .drop-area { 
     width: 100%; 
     height: 20vh; 
     background-color: #f1f1f1; 
     border: 1px solid red; 
     margin: 5px 0; 
    } 
    `] 
}) 
export class App { 
    name:string; 
    files: string[]; 
    constructor(private zone:NgZone) { 
    this.name = 'Angular2' 
    this.files = []; 
    } 

    onFilesDrop(files) { 
    this.zone.run(()=>{ 
     files.forEach((f) => { 
     this.files.push(f.name); 
     }) 
     console.log(this.files); 
    }); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, FileDropDirective ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}