Question

我正在尝试使用this库来上传angular2 CR5打字稿中的文件。我使用的是角"version": "1.0.0-beta.16"

所以，首先我

npm i ng2-file-upload --save

在我有的组件中：

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端的一部分是：

          <div ng2FileDrop
                 [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                 (fileOver)="fileOverBase($event)"
                 [uploader]="uploader"
                 class="well my-drop-zone">
                Base drop zone
            </div>

并抱怨：

Can't bind to 'uploader' since it isn't a known property of 'div'. ("s': hasAnotherDropZoneOver}"
                 (fileOver)="fileOverAnother($event)"
                 [ERROR ->][uploader]="uploader"
                 class="well my-drop-zone">
                Another drop zone
"): AppComponent@33:17

Answer 1

解决方案是将我的角度更新为最新版本。

然后将以下内容添加到app.module文件中：

import { FileUploadModule } from "ng2-file-upload";
//...
@NgModule({
    imports: [
        //...,
        FileUploadModule
    ],
    declarations: [],
    providers: []
})
export class ObjektinfoModule {
}

Answer 2

有时您需要使用（上传器）而不是方括号[uploader]来正确绑定属性。很奇怪，但为我解决了这个问题。

Answer 3

解决方案只是将FIleUploadModule导入主模块。

import { FileUploadModule } from 'ng2-file-upload'
...
imports: [
...
FileUploadModule
],

Answer 4

问题不仅是导入，还包括模板中的问题：

尝试在component.html文件中初始化以下内容（上载器）。

代替[uploader]="uploader":

             <div ng2FileDrop
                   [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                   (fileOver)="fileOverBase($event)"
                   [uploader]="uploader"
                   (onFileDrop)="onFileSelected($event)"
                   class="well my-drop-zone">
                  Base drop zone
              </div>

添加(uploader)="uploader":

                <div ng2FileDrop
                   [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                   (fileOver)="fileOverBase($event)"
                   (uploader)="uploader"
                   (onFileDrop)="onFileSelected($event)"
                   class="well my-drop-zone">
                  Base drop zone
              </div>

无法绑定到“上传者”＃39;因为它不是“div”的已知属性。

4 个答案: