angular 5 - ng2-file-upload：无法绑定到 'uploader'，因为它不是 'div' 的已知属性

Question

我看了之前的问题，答案的解决方案已经到位，这就是为什么我开始另一个问题的原因

我在 Angular 5 中使用 ng2-file-upload 收到以下错误：

    Uncaught Error: Template parse errors:
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
"): ng:///AppModule/UploadComponent.html@25:17
    at syntaxError (compiler.js:466)
    at TemplateParser.parse (compiler.js:24312)
    at JitCompiler._parseTemplate (compiler.js:33699)
    at JitCompiler._compileTemplate (compiler.js:33674)
    at eval (compiler.js:33576)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:33576)
    at eval (compiler.js:33446)
    at Object.then (compiler.js:455)
    at JitCompiler._compileModuleAndComponents (compiler.js:33445)

我将指令导入并声明到 app.module.ts 中，但错误仍然存在。 ng-file-upload 和 angular 5 有人遇到过这个问题吗？

Answer 1

FileUploadModule 需要导入并添加到声明组件的模块中的导入。

import { FileUploadModule } from "ng2-file-upload";   //Should import HERE

imports: [  ...FileUploadModule ... ]   //RIGHT PLACE

Answer 2

在相应的 module.ts 文件中添加

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

Add it under import 
  @NgModule({
      imports: [
         FileUploadModule
      ]
})

<b>Import FileUploaderOptions,FileUploader into your .ts file </b>

      import { FileUploaderOptions,FileUploader } from 'ng2-file-upload';

在此 class .ts 文件中，添加条目

  options: FileUploaderOptions;
  uploader: FileUploader = new FileUploader(this.options);

<b>In the ngOnInit() add the text </b>

    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
        console.log('file:uploaded:', item, status, response);
        alert('File uploaded successfully');
    }

在 HTML 文件中添加 select 按钮

      <div>
        <input type="file" name="photo" ng2FileSelect  [uploader]="uploader" />
        <button type="button" class="btn btn-success btn-s" 
          (click)="uploader.uploadAll()" 
          [disabled]="!uploader.getNotUploadedItems().length" >
              Upload file
        </button>
      </div>

angular 5 - ng2-file-upload：无法绑定到 'uploader'，因为它不是 'div' 的已知属性

angular 5 - ng2-file-upload: Can't bind to 'uploader' since it isn't a known property of 'div'

angular

ng-file-upload

angular5

angular-template

angular 5 - ng2-file-upload：无法绑定到 'uploader'，因为它不是 'div' 的已知 属性

angular 5 - ng2-file-upload: Can't bind to 'uploader' since it isn't a known property of 'div'

angular

ng-file-upload

angular5

angular-template

angular 5 - ng2-file-upload：无法绑定到 'uploader'，因为它不是 'div' 的已知属性