angular 5 - ng2-file-upload: невозможно привязать к «загрузчику», так как это неизвестное свойство «div»

Я прочитал предыдущие вопросы, и ответы на них уже были готовы, поэтому я задал еще один вопрос

Я получаю следующую ошибку при загрузке файла ng2 в Angular 5:

    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?


angular angular-template angular5 ng-file-upload
person Matt    schedule 04.12.2017    source источник
comment
У вас есть schemas: [CUSTOM_ELEMENTS_SCHEMA], в вашей основной @NgModule?   -  person msanford    schedule 04.12.2017
comment
@msanford да, знаю. Я действительно понял это. см. ответ ниже. это не позволит мне пометить его как отвеченный. Я буквально только что понял это после того, как опубликовал его.   -  person Matt    schedule 04.12.2017
comment
Сладкий! Да, вы должны вернуться через несколько дней, чтобы принять его, но, пожалуйста, сделайте это, как только истечет время.   -  person msanford    schedule 04.12.2017
comment
@msanford определенно. Спасибо за вашу помощь!   -  person Matt    schedule 04.12.2017

Ответы (2)


arrow_upward
1
arrow_downward

FileUploadModule необходимо импортировать и добавить в импорт в модуле, объявляющем компонент.

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

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

Angular 2: невозможно привязать к «загрузчику», так как это неизвестное свойство «ввода»

person Matt    schedule 04.12.2017
comment
Вы изменили его с привязки параметра на привязку события? И это действительно работает? Я ничего не знаю о ng-uploader, но мне это кажется очень странным, поскольку эти две вещи (очевидно) работают в противоположных «направлениях». Есть идеи, в чем была основная проблема? - person msanford; 04.12.2017
comment
хм? привязка свойств к привязке событий работает для вас? - person Mujah Maskey; 04.12.2017

arrow_upward
0
arrow_downward

В соответствующем файле 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';

В этот файл класса .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 кнопку выбора

      <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>
person user1416932    schedule 17.07.2019