Question

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();
    } 
    }

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>

app.module.ts

    ...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 { }

未捕获（承诺）：错误：模板解析错误：无法绑定到“上载器”，因为它不是“输入”的已知属性。（“

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

UploadFileModule 是通过 app.module.ts 导入的，但是如果缺少另一个模块，我仍然对这个问题有帮助吗？

Answer 1

您要在app.module中导入FileUploadModule，这不是在声明Ajouter-produit.component.ts的位置。将其导入声明组件的模块中（在本例中为AdminModule）。

未捕获（承诺）：错误：模板解析错误：由于它不是“输入”的已知属性，因此无法绑定到“上载器”

1 个答案: