Angular 未捕获(承诺中):错误:模板解析错误:Can';t绑定到';上传器';因为它不是';t'的已知属性;输入';

Angular 未捕获(承诺中):错误:模板解析错误:Can';t绑定到';上传器';因为它不是';t'的已知属性;输入';,angular,angular7,Angular,Angular7,Ajouter produit.component.ts import { Component, OnInit, ElementRef, ViewChild } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; import { Produit } from 'src/app/interface/produit'; import { ProduitS

Ajouter produit.component.ts

    import { Component, OnInit, ElementRef, ViewChild }
    from '@angular/core';
    import { FormGroup, FormControl } from '@angular/forms';
    import { Produit } from 'src/app/interface/produit';
    import { ProduitService } from 'src/app/service/produit.service';
    import { ActivatedRoute } from '@angular/router';
    import { MatSnackBar } from '@angular/material';
    import {FileUploader} from 'ng2-file-upload';
    @Component({
    selector: 'app-ajouter-produit',
    templateUrl: './ajouter-produit.component.html',
    styleUrls: ['./ajouter-produit.component.scss'],
    })
    export class AjouterProduitComponent implements OnInit {
    produitForm = new FormGroup({
    nomProduit: new FormControl(''),
    duree: new FormControl(''),
    });
    produit: Produit;
    idProduit: number;
    /* PHOTO  */
    @ViewChild('fileInput') fileInput: ElementRef;
    uploader: FileUploader;
    isDropOver: boolean;
    /*     */
    constructor( private produitService: ProduitService, private route: 
    ActivatedRoute, public snackBar: MatSnackBar) { }
    ngOnInit(): void {
    const headers = [{name: 'Accept', value: 'application/json'}];
    this.uploader = new FileUploader({url: 
    'http://localhost:9090/api/auth/produits/files', autoUpload: true, 
    headers: headers});
    this.uploader.onCompleteAll = () => console.log(this.uploader);
    }
    saveProduit() {
    if (this.produitForm.valid) {
    console.log('user==============', this.produitForm.value);
    if (this.produit === undefined) {
    this.produitService.saveproduit(this.produitForm.value).subscribe( 
    produit =>
    this.snackBar.open('Produit ajouté!', '×', { panelClass: 'success', 
    verticalPosition: 'top', duration: 3000 }),
    err =>
          console.log('ERROOr=$====', err)
        );
      }

    }

    } 
    fileOverAnother(e: any): void {
    this.isDropOver = e;

    }

    fileClicked() {
    this.fileInput.nativeElement.click();
    } 
    }
    ...import {FileUploadModule, FileSelectDirective, FileDropDirective} from 
    'ng2-file-upload';
    @NgModule({
    imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    NgxSpinnerModule,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyAAYi6itRZ0rPgI76O3I83BhhzZHIgMwPg'
    }),
    SharedModule,
    FileUploadModule,
    routing
    ],
    declarations: [
    AppComponent,
    PagesComponent,
    NotFoundComponent,
    TopMenuComponent,
    MenuComponent,
    SidenavMenuComponent,
    BreadcrumbComponent,
    OptionsComponent,
    FooterComponent,
    MyhomeComponent,
    ],
    providers: [
    UserService,
    AuthenticationService,
    TokenStorageService,
    AppSettings,
    AuthGuard,
    AppService,
    { provide: OverlayContainer, useClass: CustomOverlayContainer },
    { provide: MAT_MENU_SCROLL_STRATEGY, useFactory: menuScrollStrategy, 
    deps: [Overlay] },
    { provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true }
    ],
    bootstrap: [AppComponent] 
    })
    export class AppModule { }    
ajouter produit.html

    enter code <div fxLayout="row wrap">
    <div fxFlex="100" fxFlex.gt-sm="50" class="p-2">
      <h2 class="text-muted text-center">Ajouter un produit</h2>
      <form [formGroup]="produitForm">
          <mat-form-field class="w-100 mt-2">
              <input matInput placeholder="Nom du produit" 
    formControlName="nomProduit"  required>
             </mat-form-field>
          <mat-form-field class="w-100 mt-1">
              <input matInput placeholder="Duree" formControlName="duree" required>
          </mat-form-field>
          <div class="text-center mt-2">
            <input #fileInput type="file" ng2FileSelect [uploader]="uploader"/>

            <button  ng2FileDrop
                 [ngClass]="{'dragover': isDropOver}"
                 [uploader]="uploader"
                 (fileOver)="fileOverAnother($event)"
                 (click)="fileClicked()">  choisir une image
            </button>
              <button mat-raised-button color="primary"  (click)="saveProduit()">Save</button>
          </div> 
      </form>
      </div>
      <div fxFlex="100" fxFlex.gt-sm="50" class="p-2" ngClass.sm="mt-2" 
      ngClass.xs="mt-2">

      </div>
      </div> 
未捕获(承诺中):错误:模板分析错误: 无法绑定到“uploader”,因为它不是“input”的已知属性。(”

输入代码
] 
[上传者]=“上传者”/>

您正在app.module中导入您的FileUploadModule,而app.module不是声明Ajouter-produit.component.ts的位置。请在声明组件的模块中导入它,在您的示例中是AdminModule。

您正在app.module中导入您的FileUploadModule,而不是声明Ajouter-produit.component.ts的位置。导入它在声明组件的模块中,在您的情况下,AdminModule。

是您的错误。它告诉您没有正确导入包含该指令的模块。可能您使用了第二个模块,但忘记导出所述模块。a将非常有助于我们帮助您,甚至帮助您(您可以通过尝试复制来解决问题)
是您的错误。它告诉您没有正确导入包含该指令的模块。可能您使用了第二个模块,但忘记导出所述模块。a将非常有助于我们帮助您,甚至帮助您(您可以通过尝试复制来解决您的问题)FileSelectedDirective已经在FileUploadModule中,这就是为什么我不必将它放在声明中的原因您导入了但没有使用它,这让我很困惑。您正在app.module中导入您的FileUploadModule,而app.module中并没有声明Ajour-produit.component.ts。请在您的案例,AdminModule。谢谢,通过在admin.Module中导入FileUploadModule解决了问题。欢迎您,我将编辑我的答案,如果您愿意,请标记为已解决并投票。FileSelectedDirective已在FileUploadModule中,这就是为什么我不必将其放在声明中。您导入并没有使用它,这让我很困惑。您是im吗在app.module中移植您的FileUploadModule,而app.module不是声明Ajouter-produit.component.ts的位置。在声明组件的模块中导入它,在您的示例中是AdminModule希望
enter code  <div class="text-center mt-2">
        <input #fileInput type="file" ng2FileSelect [ERROR ->] 
[uploader]="uploader"/>
        <button  ng2FileDrop
"): ng:///AdminModule/AjouterProduitComponent.html@12:56
Can't bind to 'uploader' since it isn't a known property of 'button'. ("      
<button  ng2FileDrop
             [ngClass]="{'dragover': isDropOver}"
             [ERROR ->][uploader]="uploader"
             (fileOver)="fileOverAnother($event)"
             (click"): 
 ng:///AdminModule/AjouterProduitComponent.html@16:17
 Error: Template parse errors:
 Can't bind to 'uploader' since it isn't a known property of 'input'. ("
       <div class="text-center mt-2">
        <input #fileInput type="file" ng2FileSelect [ERROR ->] 
 [uploader]="uploader"/>
        <button  ng2FileDrop
  "): ng:///AdminModule/AjouterProduitComponent.html@12:56
  Can't bind to 'uploader' since it isn't a known property of 'button'. 
  ("      <button  ng2FileDrop
             [ngClass]="{'dragover': isDropOver}"
             [ERROR ->][uploader]="uploader"
             (fileOver)="fileOverAnother($event)"
             (click"): 
   ng:///AdminModule/AjouterProduitComponent.html@16:17