ng2-file-upload：无法读取未定义的属性“队列”答案

【问题标题】：ng2-file-upload: Cannot read property 'queue' of undefinedng2-file-upload：无法读取未定义的属性“队列”
【发布时间】：2017-02-03 11:56:11
【问题描述】：

我正在尝试使用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

【问题讨论】：

标签： angular

【解决方案1】：

您的代码看起来不错。

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

如果您在上传文件后立即收到错误，请检查“onWhenAddingFileFailed”事件以查看它是否引发某种错误。

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

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

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

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

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

如果这没有帮助，请在代码的“this.uploader = new FileUploader({ url: URL })”部分设置一个断点并检查“this .uploader.queue”返回。

最后，您可以查看“/node_modules/ng2-file-upload/”路径中的file.uploader.class.js，为您提供更多信息关于“uploader.queue”对象是如何初始化和填充的。

希望这会有所帮助。

【讨论】：

【解决方案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';

【讨论】：

你可以从这里得到我的代码github.com/salman-/angular2-template

【解决方案3】：

以防万一有人遇到类似问题... “错误类型错误：无法在 FileSelectDirective 读取属性‘选项’的 null”。

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

我明白了：

我的标记看起来像这样：

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

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

 <div ng2FileDrop
             [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
             (fileOver)="fileOverAnother($event)"
             [uploader]="uploader"
             class="well my-drop-zone">
            Another drop zone
        </div>

这解决了我的问题，所以我去掉了attr前缀，一切正常。

【讨论】：