Angular 未捕获(承诺中):错误:模板解析错误:Can';t绑定到';上传器';因为它不是';t'的已知属性;输入';
Ajouter produit.component.tsAngular 未捕获(承诺中):错误:模板解析错误: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
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