web-dev-qa-db-fra.com

Angular 2: Impossible de se lier à 'uploader' car ce n'est pas une propriété connue de 'input'

Im essayant d'intégrer le module de téléchargement de fichiers ng2 dans mon application.

Et je reçois cette erreur de modèle: impossible de se lier à "uploader" car ce n'est pas une propriété connue de "input"

MISE À JOUR du dossier str: 

/src/app/app.module.ts

/src/app/components/layout/
                           layout.module.ts
                           other layout components files

                  /category-items
                            category-items.module.ts
                            category-items.component.ts

dans layout.module.ts 

import { LayoutComponent } from './layout.component';

declarations: [
    LayoutComponent,

dans category-items.module.ts 

import { CategoryItemsComponent } from './category-items.component';

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

imports: [  ...FileUploadModule ... ]

app\app.module.ts 

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

 imports: [  ...FileUploadModule ... ]

app\components\layout\category-items\category-items.component.ts 

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

@Component({
  selector: 'button-view',
  template: `

  <input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />   

  `
  })

export class ButtonViewComponent implements ViewCell, OnInit {

...
 public uploader:FileUploader = new FileUploader({url:'http://lcoalhost:5000/upload'});

}

@Component({
  selector: 'app-category-items',
  templateUrl: './category-items.component.html',
  styleUrls: ['./category-items.component.scss']
})

export class CategoryItemsComponent implements OnInit {
...
}

Ou si j'essaye comme ci-dessous: je reçois une balise div de fermeture inattendue

<div ng2FileDrop
         (fileOver)-'fileOverBase($event)'
         [uploader]="uploader"
         class="well my-drop-zone">
        Base drop zone
    </div>

J'ai essayé plusieurs combinaisons d'importations pour 'FileUploadModule' dans mon app.module dans divers articles, mais aucune ne semble fonctionner dans mon cas.

Trace de la pile d'erreur:

"Uncaught (promis): Erreur: Erreurs d'analyse de modèle: ↵Ne peut pas se lier à 'uploader' car ce n'est pas une propriété connue de 'input'. (" ↵ ↵

Ont googlé de nombreux messages pour des solutions pour les mêmes:

Certaines des références étaient: (mais aucune n'aidait)

https://github.com/valor-software/ng2-file-upload/issues/418

https://github.com/valor-software/ng2-file-upload/issues/608

angularng2-file-upload
11
phyme

Vous devez importer FileUploadModule dans le module qui déclare le composant à l'aide de 'upload' qui dans votre cas serait category-items.module.ts

category-items.module.ts

import { CategoryItemsComponent } from './category-items.component';

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

imports: [  ...FileUploadModule ... ]   //RIGHT PLACE
30
0mpurdy

ajouter à app.module.ts ceci 

import { FileSelectDirective } from 'ng2-file-upload';
@NgModule({
    imports: [
        ...
],
    declarations: [
        FileSelectDirective
    ],
    providers: [
        ...
],
    bootstrap: [
        App,
    ],
})

https://github.com/valor-software/ng2-file-upload/issues/418#issuecomment-24986517

Ou essayez d'importer FIleUploadModule dans un module parent

importer {FIleUploadModule} de 'ng2-file-upload';

imports: [
    FIleUploadModule,
    ..........,
    ........,
    ......,

]

Cela devrait fonctionner.

0
Kishore Peter