0

在使用递归函数读取用户拖放文件时，我遇到了 Angular 2 更改检测的一个奇怪问题。

参考这里的例子：

文件放置示例：plnkr.co

在上面的示例中，有两个文件放置区域。顶部区域使用递归函数来读取用户丢弃项目中的所有文件。底部区域只需使用dataTransfer.files.

丢弃的文件应该显示在下面。但是，更改检测仅适用于底部放置区域。

这是我实际应用程序的简化版本。我不热衷于使用ChangeDetectorRef来触发检测（我知道它适用于 plunker 示例）。

有没有更好的方法来读取所有放入的文件（包括子文件夹中的文件）webkitGetAsEntry()？或者另一种方法可以与角度变化检测一起使用？

我在 Angular 2.4.9 上。

4

1 回答 1

0

将 app.ts 中的代码替换为以下代码即可。Zone.js 将在回调执行后检测更改。

//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 {}
于 2017-03-10T15:57:18.223 回答