ng2-file-upload：無法讀取未定義的屬性'隊列'

我試圖使用this庫來上傳angular2打字稿中的文件。ng2-file-upload：無法讀取未定義的屬性'隊列'

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

所以，第i個

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安裝然後納克服務

來源

2017-02-03 Kamyar Parastesh

您的代碼看起來不錯。

當頁面加載或嘗試上載文件時，您是否收到錯誤消息？

如果您在上傳文件後出現錯誤，請檢查「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}）」部分代碼並檢查wh在「this.uploader.queue」返回。

最後，你可以檢查file.uploader.class.js它可以發現「/node_modules/NG2文件上傳/」路徑給你如何做「uploader.queue」對象的詳細信息被初始化並填充。

希望這會有所幫助。

來源

2017-02-03 20:00:20

我得到了頁面加載錯誤 –

我試過你的代碼，它似乎爲我工作沒有錯誤http： //prntscr.com/e463bp –

thx，我接受你的回答 –

我相信你必須添加表格模塊進口：

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';

來源

2017-02-03 18:40:46 Bhetzie

不幸的是，沒有工作。我編輯我的問題 –

你可以從這裏得到我的代碼https://github.com/salman-/angular2-template –

以防萬一有人遇到類似的問題...... 「錯誤類型錯誤：無法在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前綴，和一切工作正常。

來源

2017-09-29 10:39:09 seven

ng2-file-upload：無法讀取未定義的屬性'隊列'

回答

相關問題