angular - 未捕获(承诺):错误:模板解析错误:无法绑定到“上传器”,因为它不是“输入”的已知属性
问题描述
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已导入 im app.module.ts但我仍然有这个问题,如果缺少另一个模块,请提供任何帮助?
解决方案
您正在 app.module 中导入 FileUploadModule,这不是声明 Ajouter-produit.component.ts 的位置。将其导入声明组件的模块中,在您的情况下为 AdminModule。
推荐阅读
- android - 满足条件时如何自动打开我的应用程序?
- python - Python并排matplotlib箱线图与颜色
- postgresql - HikariPool-1 - 无法验证连接 org.postgresql.jdbc.PgConnection@2a84e649(此连接已关闭。)
- python - 如何从系数矩阵打印回归方程?
- python - 使用 python 进行谷歌搜索并抓取第一个结果
- python - 使用矩形的左上角和右下角裁剪矩形人脸检测框内的区域
- c# - 将 Word 2013 加载项项目降级为 Word 2010 加载项
- macos - 更新 Xcode 后 VisualStudioForMac 应用程序无法正常工作
- javascript - 使用“next()”或“closest()”在 DOM 中找不到元素
- php - 在 codeignitter 中从 db-query 重新组织结果数组