ng2-file-upload：无法读取未定义

Question

我正在尝试使用this库来上传angular2，typescript中的文件。

"@angular/core": "^2.3.1", "@angular/compiler-cli": "^2.3.1"

所以，首先我

npm i ng2-file-upload --save

并将app.module.ts更改为：

    import { FileUploadModule } from "ng2-file-upload";

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    HeaderComponent,
    UploaderComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    FileUploadModule
  ],
  providers: [],
  bootstrap: [AppComponent]

})
export class AppModule { }

在我有的组件中：

import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';

// const URL = '/api/';
const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';

@Component({
  selector: 'app-simple-demo',
  templateUrl: './simple-demo.component.html',
  styleUrls: ['./simple-demo.component.css']
})
export class SimpleDemoComponent {
  public uploader:FileUploader = new FileUploader({url: URL});
  public hasBaseDropZoneOver:boolean = false;
  public hasAnotherDropZoneOver:boolean = false;

  public fileOverBase(e:any):void {
    this.hasBaseDropZoneOver = e;
  }

  public fileOverAnother(e:any):void {
    this.hasAnotherDropZoneOver = e;
  }
}

组件的html端的一部分是：

<tr *ngFor="let item of uploader.queue">

并抱怨：

 Cannot read property 'queue' of undefined

您可以找到源代码here 只需执行 npm install ，然后 ng serve

Answer 1

您的代码看起来很好。

页面加载或尝试上传文件时是否收到错误？

如果您在上传文件后立即收到错误，请检查＆＃34; onWhenAddingFileFailed ＆＃34;事件，看它是否会引发某种错误。

您可以在下面找到适合我的代码：

import { FileUploadModule } from 'ng2-file-upload';

@NgModule({   
imports: [
    FileUploadModule
],
providers: [        
],
declarations: [MyTestComponent],   
    exports: []
})

＆GT;

<input type="file" ng2FileSelect [uploader]="uploader" />

＆GT;

import { FileUploader } from 'ng2-file-upload';
export class MyTestComponent implements OnInit {
    public uploader: FileUploader;
    ngOnInit() {
        this.uploader = new FileUploader({ url: URL });
        this.uploader.onAfterAddingFile = () => this.onUploaderAfterAddingFile();  
        this.uploader.onWhenAddingFileFailed = () => this.onUploaderWhenAddingFileFailed();       
    }
}

如果这没有帮助，请将断点添加到＆＃34; this.uploader = new FileUploader（{url：URL}）＆＃34;部分代码并检查＆＃34; this.uploader.queue ＆＃34;回报。

最后，您可以查看 file.uploader.class.js ，该文件位于＆＃34; / node_modules / ng2-file-upload / ＆＃34;路径，为您提供更多信息＆＃34; uploader.queue＆＃34;对象被初始化并填充。

希望这会有所帮助。

Answer 2

我相信您必须将表单模块添加到导入：

import { FileUploadModule } from "ng2-file-upload/file-upload/file-upload.module";
import { FormsModule }    from '@angular/forms';
@NgModule({
imports: [FileUploadModule, FormsModule],
declarations: [AppComponent],

<强>组件

import { FileUploader } from 'ng2-file-upload/ng2-file-upload';

Answer 3

以防有人遇到类似的问题...... ＆＃34;错误类型错误：无法读取属性＆＃39;选项＆＃39;在FileSelectDirective＆＃34;。

经过一些调试后，我看到了，而不是这个：

我知道了：

我的标记看起来像这样：

if session[:image_id].include? params[:id]
  session[:image_id].delete(params[:id])
else
  if session[:image_id].count < 8
     session[:image_id] << params[:id]
  else
     flash.now[:error] = "you have exceeded limit of adding image."
  end
end

我不知道 WHEN 和为什么我这样做了。 demo清楚地说明了这一点：

ng2FileDrop (fileOver)="setFileOver($event)" [attr.uploader]="uploader">

解决了我的问题，所以我摆脱了 <div ng2FileDrop [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}" (fileOver)="fileOverAnother($event)" [uploader]="uploader" class="well my-drop-zone"> Another drop zone </div> 前缀，一切正常。