Angular Karma - nb-card-header' 不是已知元素
Angular Karma - nb-card-header' is not a known element
当我尝试使用 karma 进行测试时，我在很多页面中都遇到了这个错误....
Failed: Template parse errors:
'nb-card-header' is not a known element:
1. If 'nb-card-header' is an Angular component, then verify that it is part of this module.
2. If 'nb-card-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<nb-card>
[ERROR ->]<nb-card-header>
Manage Coupon
</nb-card-header>
"): ng:///DynamicTestModule/EditCouponComponent.html@1:2
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("e">
<input type="text" placeholder="Coupon Name" class="form-control" id="usr" [ERROR ->][(ngModel)]="CouponDetails.name">
</div>
</div>
"): ng:///DynamicTestModule/EditCouponComponent.html@12:95
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("">
<input type="text" placeholder="Description" class="form-control" id="usr2" [ERROR ->][(ngModel)]="CouponDetails.description">
</div>
</div>
"): ng:///DynamicTestModule/EditCouponComponent.html@19:96
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="text" placeholder="Coupon Code" class="form-control" id="stuff" [ERROR ->][(ngModel)]="CouponDetails.code" (keydown)="onKeydown($event)">
</span>
"): ng:///DynamicTestModule/EditCouponComponent.html@27:101
Can't bind to 'ngModel' since it isn't a known property of 'select'. (" <div class="profile-info-value">
<span>
<select [ERROR ->][(ngModel)]="CouponDetails.status" class="browser-default custom-select" placeholder="Select Status">"): ng:///DynamicTestModule/EditCouponComponent.html@35:32
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input matInput (ngModelChange)="changeMaxDate($event)" [min]="minDate" [ERROR ->][(ngModel)]="CouponDetails.startDate" [matDatepicker]="picker" placeholder="Choose a Promotion Start "): ng:///DynamicTestModule/EditCouponComponent.html@47:100
Can't bind to 'matDatepicker' since it isn't a known property of 'input'. ("Input (ngModelChange)="changeMaxDate($event)" [min]="minDate" [(ngModel)]="CouponDetails.startDate" [ERROR ->][matDatepicker]="picker" placeholder="Choose a Promotion Start Date" >
<"): ng:///DynamicTestModule/EditCouponComponent.html@47:138
Can't bind to 'htmlFor' since it isn't a known property of 'mat-datepicker-toggle'.
1. If 'mat-datepicker-toggle' is an Angular component and it has 'htmlFor' input, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("der="Choose a Promotion Start Date" >
<mat-datepicker-toggle matSuffix [ERROR ->][for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-da"): ng:///DynamicTestModule/EditCouponComponent.html@48:61
'mat-datepicker-toggle' is not a known element:
1. If 'mat-datepicker-toggle' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[matDatepicker]="picker" placeholder="Choose a Promotion Start Date" >
[ERROR ->]<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
"): ng:///DynamicTestModule/EditCouponComponent.html@48:28
'mat-datepicker' is not a known element:
1. If 'mat-datepicker' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("at-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
[ERROR ->]<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
"): ng:///DynamicTestModule/EditCouponComponent.html@49:28
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div class="profile-info-value">
<span>
[ERROR ->]<mat-form-field>
<input matInput (ngModelChange)="changeMaxDate($event)""): ng:///DynamicTestModule/EditCouponComponent.html@46:24
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <mat-form-field>
<input matInput [min]="minDate2" [ERROR ->][(ngModel)]="CouponDetails.endDate" [matDatepicker]="pickers" placeholder="Choose Expiration Date">
"): ng:///DynamicTestModule/EditCouponComponent.html@59:62
Can't bind to 'matDatepicker' since it isn't a known property of 'input'. ("
<input matInput [min]="minDate2" [(ngModel)]="CouponDetails.endDate" [ERROR ->][matDatepicker]="pickers" placeholder="Choose Expiration Date">
<mat-dat"): ng:///DynamicTestModule/EditCouponComponent.html@59:98
Can't bind to 'htmlFor' since it isn't a known property of 'mat-datepicker-toggle'.
1. If 'mat-datepicker-toggle' is an Angular component and it has 'htmlFor' input, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("placeholder="Choose Expiration Date">
<mat-datepicker-toggle matSuffix [ERROR ->][for]="pickers"></mat-datepicker-toggle>
<mat-datepicker #pickers></mat-"): ng:///DynamicTestModule/EditCouponComponent.html@60:61
'mat-datepicker-toggle' is not a known element:
1. If 'mat-datepicker-toggle' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("dDate" [matDatepicker]="pickers" placeholder="Choose Expiration Date">
[ERROR ->]<mat-datepicker-toggle matSuffix [for]="pickers"></mat-datepicker-toggle>
"): ng:///DynamicTestModule/EditCouponComponent.html@60:28
'mat-datepicker' is not a known element:
1. If 'mat-datepicker' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("t-datepicker-toggle matSuffix [for]="pickers"></mat-datepicker-toggle>
[ERROR ->]<mat-datepicker #pickers></mat-datepicker>
</mat-form-field>
"): ng:///DynamicTestModule/EditCouponComponent.html@61:28
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div class="profile-info-value">
<span>
[ERROR ->]<mat-form-field>
<input matInput [min]="minDate2" [(ngModel)]="CouponDe"): ng:///DynamicTestModule/EditCouponComponent.html@58:24
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("="number" (keypress)="numberOnly($event)" placeholder="Usage Limit" class="form-control" id="stuff" [ERROR ->][(ngModel)]="CouponDetails.usageLimit">
</span>
</div>
"): ng:///DynamicTestModule/EditCouponComponent.html@71:143
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" (keypress)="numberOnly($event)" placeholder="Discount Percentage" class="form-control" id="stuff" [ERROR ->][(ngModel)]="CouponDetails.offerPercentage">
</span>
</div>
"): ng:///DynamicTestModule/EditCouponComponent.html@80:161
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("(keypress)="numberOnly2($event)" placeholder="Minimum Order Amount" class="form-control" id="stuff" [ERROR ->][(ngModel)]="CouponDetails.minimumOrderAmount">
<label for="stuff" class=" i"): ng:///DynamicTestModule/EditCouponComponent.html@89:153
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("ypress)="numberOnly2($event)" placeholder="Maximum Discount Amount" class="form-control" id="stuff" [ERROR ->][(ngModel)]="CouponDetails.maximumLimit">
<label for="stuff" class=" input-i"): ng:///DynamicTestModule/EditCouponComponent.html@99:156
'nb-card-body' is not a known element:
1. If 'nb-card-body' is an Angular component, then verify that it is part of this module.
2. If 'nb-card-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</nb-card-header>
[ERROR ->]<nb-card-body>
<div class="profile-user-info" *ngIf="CouponDetails">
"): ng:///DynamicTestModule/EditCouponComponent.html@5:2
'nb-card' is not a known element:
1. If 'nb-card' is an Angular component, then verify that it is part of this module.
2. If 'nb-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</div>
</nb-card-body>
[ERROR ->]<nb-card>"): ng:///DynamicTestModule/EditCouponComponent.html@119:0
'nb-card' is not a known element:
1. If 'nb-card' is an Angular component, then verify that it is part of this module.
2. If 'nb-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<nb-card>
<nb-card-header>
Manage Coupon
"): ng:///DynamicTestModule/EditCouponComponent.html@0:0
组件
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { ApiService } from '../../../../app/services/api.service';
import { ToasterConfig } from 'angular2-toaster';
import { Router, ActivatedRoute } from '@angular/router';
import { NbComponentStatus, NbGlobalPhysicalPosition, NbToastrService} from '@nebular/theme';
import { AuthService } from '../../../services/auth.service';
import { UploadFileService } from '../../../services/upload-file.service';
import { EnvironmentService } from '../../../../environments/environment.service';
import { NgxSpinnerService } from "ngx-spinner";
import { NgbModal,ModalDismissReasons, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, FormArray, AbstractControl } from '@angular/forms';
import 'rxjs/add/operator/debounceTime';
export interface Item{
teaType:string;
noOfContainers:number;
weightPerContainerinKgs:number;
totalItemWeight:number
}
@Component({
selector: 'ngx-edit-menu',
templateUrl: './edit-coupon.component.html',
styleUrls: ['./edit-coupon.component.scss']
})
export class EditCouponComponent implements OnInit {
minDate: any;
minDate2: any;
CouponDetails: any;
currency:any;
constructor(private apiService: ApiService,
private auth: AuthService,
private toastrService: NbToastrService,
private router: Router,
private uploadService:UploadFileService,
public envService: EnvironmentService,
private spinner: NgxSpinnerService,
private modalService: NgbModal,
private fb: FormBuilder,
private route: ActivatedRoute) {
if(localStorage.getItem('CouponId')){
this.getCouponById(localStorage.getItem('CouponId'));
} else {
this.getCoupon();
}
}
ngOnInit() {
this.getStatus();
this.minDate = new Date();
this.currency =localStorage.getItem('CurrencySymbol');
}
changeMaxDate(date){
this.minDate2 = date;
if(this.CouponDetails.endDate){
if(new Date(this.CouponDetails.endDate) < new Date(this.minDate2)){
this.CouponDetails.endDate = null;
this.showToast('danger', '', 'Please Select Expiry Date');
}
}
}
getCoupon() {
this.CouponDetails = {
name: "",
description:"",
code: "",
status: "",
startDate: "",
endDate: "",
offerPercentage: "",
usageLimit: "",
minimumOrderAmount: "",
maximumLimit : "",
};
this.minDate2 = new Date();
}
getCouponById(CouponId){
this.apiService.getCouponById(CouponId).subscribe((res)=>{
const data = res.body.discountCodes;
this.CouponDetails = data;
this.minDate2 = data.startDate;
});
}
status: any;
public getStatus(){
this.status = [
{ value: 'active', label: 'Active' },
{ value: 'inactive', label: 'Inactive' },
];
}
public savedetails(){
if(!this.CouponDetails.name || !this.CouponDetails.code || !this.CouponDetails.status
|| !this.CouponDetails.startDate || !this.CouponDetails.endDate || !this.CouponDetails.usageLimit
|| !this.CouponDetails.offerPercentage || !this.CouponDetails.minimumOrderAmount
|| !this.CouponDetails.maximumLimit){
this.showToast('danger', '', 'Please fill the mandatory fields.');
return;
}
if(this.CouponDetails.offerPercentage > 99){
this.showToast('danger', '', 'Offer percentage should not be greater than 99%.');
return;
}
if(this.CouponDetails.minimumOrderAmount < this.CouponDetails.maximumLimit){
this.showToast('danger', '', 'Maximum discount amount should not be greater than Minimum order amount.');
return;
}
this.spinner.show();
this.CouponDetails.venueId = localStorage.getItem('venuesID');
if(this.CouponDetails._id){
this.apiService.editCoupon(this.CouponDetails).subscribe((res)=>{
this.spinner.hide();
if(res.status == true){
this.router.navigate(['/pages/orders/coupons']);
this.showToast('success', '', 'Succesfully updated');
} else {
this.showToast('danger', '', 'Error');
}
});
} else {
this.apiService.saveCoupon(this.CouponDetails).subscribe((res)=>{
this.spinner.hide();
if(res.status == true){
this.router.navigate(['/pages/orders/coupons']);
this.showToast('success', '', 'Succesfully added');
} else {
this.showToast('danger', '', 'Error');
}
});
}
}
cancel(){
this.router.navigate(['/pages/orders/coupons']);
}
numberOnly(event): boolean {
const charCode = (event.which) ? event.which : event.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
if(this.CouponDetails.offerPercentage>99){
return false;
}
return true;
}
dotCount:any;
checkNumberOnly:any;
checkString:any;
cdr:any;
numberOnly2(event): boolean {
const charCode = (event.which) ? event.which : event.keyCode;
if (charCode == 46) {
this.dotCount += 1;
this.checkNumberOnly = (event.target.value);
var numericCheck = (event.target.value).toString();
if (numericCheck.includes('.')) {
this.dotCount += 1;
}
if (this.dotCount > 1) {
this.dotCount = 0;
return false;
}
}
if (charCode > 31 && (charCode < 45 || charCode > 57 || charCode==47)) {
return false;
}
this.checkNumberOnly = (event.target.value);
if (this.checkNumberOnly != null) {
var numeric = (event.target.value).toString();
if (numeric.includes('.')) {
var checkNumeric = numeric.split('.');
if (checkNumeric.length > 2) {
return false;
}
this.checkString = checkNumeric[1].split('');
if (this.checkString.length > 1) {
return false;
}
}
}
this.dotCount = 0;
return true;
}
onKeydown(event) {
if (event.keyCode === 32 ) {
return false;
}
}
config: ToasterConfig;
private showToast(type: NbComponentStatus, body: string, title: string) {
const config = {
status: type,
destroyByClick: true,
duration: 2000,
position: NbGlobalPhysicalPosition.TOP_RIGHT,
preventDuplicates: false,
};
const titleContent = title ? `${title}` : '';
this.toastrService.show(
body,
`${titleContent}`,
config);
}
}
Spect.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EditCouponComponent } from './edit-coupon.component';
describe('EditCouponComponent', () => {
let component: EditCouponComponent;
let fixture: ComponentFixture<EditCouponComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EditCouponComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EditCouponComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
谢谢...................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ...................................
您需要在规范文件中导入声明 nb-card-header 元素的组件，并在其中提及 configureTestingModule 作为导入。
// spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EditCouponComponent } from './edit-coupon.component';
// I have assumed ng-card-header element is declared within NbComponentStatus. Use appropriate module/component.
import { NbComponentStatus } from '@nebular/theme';
describe('EditCouponComponent', () => {
let component: EditCouponComponent;
let fixture: ComponentFixture<EditCouponComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EditCouponComponent ],
imports: [ NbComponentStatus ],
})
.compileComponents();
}));
// rest of spec file code
要解决错误 Can't bind to 'ngModel' since it isn't a known property of 'input'，您需要导入 FormsModule 并以与上述类似的方式提及它。
我已经解决了添加 'NbCardModule' 的问题。
当我尝试使用 karma 进行测试时，我在很多页面中都遇到了这个错误....
Failed: Template parse errors:
'nb-card-header' is not a known element:
1. If 'nb-card-header' is an Angular component, then verify that it is part of this module.
2. If 'nb-card-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<nb-card>
[ERROR ->]<nb-card-header>
Manage Coupon
</nb-card-header>
"): ng:///DynamicTestModule/EditCouponComponent.html@1:2
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("e">
<input type="text" placeholder="Coupon Name" class="form-control" id="usr" [ERROR ->][(ngModel)]="CouponDetails.name">
</div>
</div>
"): ng:///DynamicTestModule/EditCouponComponent.html@12:95
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("">
<input type="text" placeholder="Description" class="form-control" id="usr2" [ERROR ->][(ngModel)]="CouponDetails.description">
</div>
</div>
"): ng:///DynamicTestModule/EditCouponComponent.html@19:96
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input type="text" placeholder="Coupon Code" class="form-control" id="stuff" [ERROR ->][(ngModel)]="CouponDetails.code" (keydown)="onKeydown($event)">
</span>
"): ng:///DynamicTestModule/EditCouponComponent.html@27:101
Can't bind to 'ngModel' since it isn't a known property of 'select'. (" <div class="profile-info-value">
<span>
<select [ERROR ->][(ngModel)]="CouponDetails.status" class="browser-default custom-select" placeholder="Select Status">"): ng:///DynamicTestModule/EditCouponComponent.html@35:32
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <input matInput (ngModelChange)="changeMaxDate($event)" [min]="minDate" [ERROR ->][(ngModel)]="CouponDetails.startDate" [matDatepicker]="picker" placeholder="Choose a Promotion Start "): ng:///DynamicTestModule/EditCouponComponent.html@47:100
Can't bind to 'matDatepicker' since it isn't a known property of 'input'. ("Input (ngModelChange)="changeMaxDate($event)" [min]="minDate" [(ngModel)]="CouponDetails.startDate" [ERROR ->][matDatepicker]="picker" placeholder="Choose a Promotion Start Date" >
<"): ng:///DynamicTestModule/EditCouponComponent.html@47:138
Can't bind to 'htmlFor' since it isn't a known property of 'mat-datepicker-toggle'.
1. If 'mat-datepicker-toggle' is an Angular component and it has 'htmlFor' input, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("der="Choose a Promotion Start Date" >
<mat-datepicker-toggle matSuffix [ERROR ->][for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-da"): ng:///DynamicTestModule/EditCouponComponent.html@48:61
'mat-datepicker-toggle' is not a known element:
1. If 'mat-datepicker-toggle' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[matDatepicker]="picker" placeholder="Choose a Promotion Start Date" >
[ERROR ->]<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
"): ng:///DynamicTestModule/EditCouponComponent.html@48:28
'mat-datepicker' is not a known element:
1. If 'mat-datepicker' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("at-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
[ERROR ->]<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
"): ng:///DynamicTestModule/EditCouponComponent.html@49:28
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div class="profile-info-value">
<span>
[ERROR ->]<mat-form-field>
<input matInput (ngModelChange)="changeMaxDate($event)""): ng:///DynamicTestModule/EditCouponComponent.html@46:24
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <mat-form-field>
<input matInput [min]="minDate2" [ERROR ->][(ngModel)]="CouponDetails.endDate" [matDatepicker]="pickers" placeholder="Choose Expiration Date">
"): ng:///DynamicTestModule/EditCouponComponent.html@59:62
Can't bind to 'matDatepicker' since it isn't a known property of 'input'. ("
<input matInput [min]="minDate2" [(ngModel)]="CouponDetails.endDate" [ERROR ->][matDatepicker]="pickers" placeholder="Choose Expiration Date">
<mat-dat"): ng:///DynamicTestModule/EditCouponComponent.html@59:98
Can't bind to 'htmlFor' since it isn't a known property of 'mat-datepicker-toggle'.
1. If 'mat-datepicker-toggle' is an Angular component and it has 'htmlFor' input, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("placeholder="Choose Expiration Date">
<mat-datepicker-toggle matSuffix [ERROR ->][for]="pickers"></mat-datepicker-toggle>
<mat-datepicker #pickers></mat-"): ng:///DynamicTestModule/EditCouponComponent.html@60:61
'mat-datepicker-toggle' is not a known element:
1. If 'mat-datepicker-toggle' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("dDate" [matDatepicker]="pickers" placeholder="Choose Expiration Date">
[ERROR ->]<mat-datepicker-toggle matSuffix [for]="pickers"></mat-datepicker-toggle>
"): ng:///DynamicTestModule/EditCouponComponent.html@60:28
'mat-datepicker' is not a known element:
1. If 'mat-datepicker' is an Angular component, then verify that it is part of this module.
2. If 'mat-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("t-datepicker-toggle matSuffix [for]="pickers"></mat-datepicker-toggle>
[ERROR ->]<mat-datepicker #pickers></mat-datepicker>
</mat-form-field>
"): ng:///DynamicTestModule/EditCouponComponent.html@61:28
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div class="profile-info-value">
<span>
[ERROR ->]<mat-form-field>
<input matInput [min]="minDate2" [(ngModel)]="CouponDe"): ng:///DynamicTestModule/EditCouponComponent.html@58:24
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("="number" (keypress)="numberOnly($event)" placeholder="Usage Limit" class="form-control" id="stuff" [ERROR ->][(ngModel)]="CouponDetails.usageLimit">
</span>
</div>
"): ng:///DynamicTestModule/EditCouponComponent.html@71:143
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" (keypress)="numberOnly($event)" placeholder="Discount Percentage" class="form-control" id="stuff" [ERROR ->][(ngModel)]="CouponDetails.offerPercentage">
</span>
</div>
"): ng:///DynamicTestModule/EditCouponComponent.html@80:161
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("(keypress)="numberOnly2($event)" placeholder="Minimum Order Amount" class="form-control" id="stuff" [ERROR ->][(ngModel)]="CouponDetails.minimumOrderAmount">
<label for="stuff" class=" i"): ng:///DynamicTestModule/EditCouponComponent.html@89:153
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("ypress)="numberOnly2($event)" placeholder="Maximum Discount Amount" class="form-control" id="stuff" [ERROR ->][(ngModel)]="CouponDetails.maximumLimit">
<label for="stuff" class=" input-i"): ng:///DynamicTestModule/EditCouponComponent.html@99:156
'nb-card-body' is not a known element:
1. If 'nb-card-body' is an Angular component, then verify that it is part of this module.
2. If 'nb-card-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</nb-card-header>
[ERROR ->]<nb-card-body>
<div class="profile-user-info" *ngIf="CouponDetails">
"): ng:///DynamicTestModule/EditCouponComponent.html@5:2
'nb-card' is not a known element:
1. If 'nb-card' is an Angular component, then verify that it is part of this module.
2. If 'nb-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</div>
</nb-card-body>
[ERROR ->]<nb-card>"): ng:///DynamicTestModule/EditCouponComponent.html@119:0
'nb-card' is not a known element:
1. If 'nb-card' is an Angular component, then verify that it is part of this module.
2. If 'nb-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<nb-card>
<nb-card-header>
Manage Coupon
"): ng:///DynamicTestModule/EditCouponComponent.html@0:0
组件
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { ApiService } from '../../../../app/services/api.service';
import { ToasterConfig } from 'angular2-toaster';
import { Router, ActivatedRoute } from '@angular/router';
import { NbComponentStatus, NbGlobalPhysicalPosition, NbToastrService} from '@nebular/theme';
import { AuthService } from '../../../services/auth.service';
import { UploadFileService } from '../../../services/upload-file.service';
import { EnvironmentService } from '../../../../environments/environment.service';
import { NgxSpinnerService } from "ngx-spinner";
import { NgbModal,ModalDismissReasons, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, FormArray, AbstractControl } from '@angular/forms';
import 'rxjs/add/operator/debounceTime';
export interface Item{
teaType:string;
noOfContainers:number;
weightPerContainerinKgs:number;
totalItemWeight:number
}
@Component({
selector: 'ngx-edit-menu',
templateUrl: './edit-coupon.component.html',
styleUrls: ['./edit-coupon.component.scss']
})
export class EditCouponComponent implements OnInit {
minDate: any;
minDate2: any;
CouponDetails: any;
currency:any;
constructor(private apiService: ApiService,
private auth: AuthService,
private toastrService: NbToastrService,
private router: Router,
private uploadService:UploadFileService,
public envService: EnvironmentService,
private spinner: NgxSpinnerService,
private modalService: NgbModal,
private fb: FormBuilder,
private route: ActivatedRoute) {
if(localStorage.getItem('CouponId')){
this.getCouponById(localStorage.getItem('CouponId'));
} else {
this.getCoupon();
}
}
ngOnInit() {
this.getStatus();
this.minDate = new Date();
this.currency =localStorage.getItem('CurrencySymbol');
}
changeMaxDate(date){
this.minDate2 = date;
if(this.CouponDetails.endDate){
if(new Date(this.CouponDetails.endDate) < new Date(this.minDate2)){
this.CouponDetails.endDate = null;
this.showToast('danger', '', 'Please Select Expiry Date');
}
}
}
getCoupon() {
this.CouponDetails = {
name: "",
description:"",
code: "",
status: "",
startDate: "",
endDate: "",
offerPercentage: "",
usageLimit: "",
minimumOrderAmount: "",
maximumLimit : "",
};
this.minDate2 = new Date();
}
getCouponById(CouponId){
this.apiService.getCouponById(CouponId).subscribe((res)=>{
const data = res.body.discountCodes;
this.CouponDetails = data;
this.minDate2 = data.startDate;
});
}
status: any;
public getStatus(){
this.status = [
{ value: 'active', label: 'Active' },
{ value: 'inactive', label: 'Inactive' },
];
}
public savedetails(){
if(!this.CouponDetails.name || !this.CouponDetails.code || !this.CouponDetails.status
|| !this.CouponDetails.startDate || !this.CouponDetails.endDate || !this.CouponDetails.usageLimit
|| !this.CouponDetails.offerPercentage || !this.CouponDetails.minimumOrderAmount
|| !this.CouponDetails.maximumLimit){
this.showToast('danger', '', 'Please fill the mandatory fields.');
return;
}
if(this.CouponDetails.offerPercentage > 99){
this.showToast('danger', '', 'Offer percentage should not be greater than 99%.');
return;
}
if(this.CouponDetails.minimumOrderAmount < this.CouponDetails.maximumLimit){
this.showToast('danger', '', 'Maximum discount amount should not be greater than Minimum order amount.');
return;
}
this.spinner.show();
this.CouponDetails.venueId = localStorage.getItem('venuesID');
if(this.CouponDetails._id){
this.apiService.editCoupon(this.CouponDetails).subscribe((res)=>{
this.spinner.hide();
if(res.status == true){
this.router.navigate(['/pages/orders/coupons']);
this.showToast('success', '', 'Succesfully updated');
} else {
this.showToast('danger', '', 'Error');
}
});
} else {
this.apiService.saveCoupon(this.CouponDetails).subscribe((res)=>{
this.spinner.hide();
if(res.status == true){
this.router.navigate(['/pages/orders/coupons']);
this.showToast('success', '', 'Succesfully added');
} else {
this.showToast('danger', '', 'Error');
}
});
}
}
cancel(){
this.router.navigate(['/pages/orders/coupons']);
}
numberOnly(event): boolean {
const charCode = (event.which) ? event.which : event.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
if(this.CouponDetails.offerPercentage>99){
return false;
}
return true;
}
dotCount:any;
checkNumberOnly:any;
checkString:any;
cdr:any;
numberOnly2(event): boolean {
const charCode = (event.which) ? event.which : event.keyCode;
if (charCode == 46) {
this.dotCount += 1;
this.checkNumberOnly = (event.target.value);
var numericCheck = (event.target.value).toString();
if (numericCheck.includes('.')) {
this.dotCount += 1;
}
if (this.dotCount > 1) {
this.dotCount = 0;
return false;
}
}
if (charCode > 31 && (charCode < 45 || charCode > 57 || charCode==47)) {
return false;
}
this.checkNumberOnly = (event.target.value);
if (this.checkNumberOnly != null) {
var numeric = (event.target.value).toString();
if (numeric.includes('.')) {
var checkNumeric = numeric.split('.');
if (checkNumeric.length > 2) {
return false;
}
this.checkString = checkNumeric[1].split('');
if (this.checkString.length > 1) {
return false;
}
}
}
this.dotCount = 0;
return true;
}
onKeydown(event) {
if (event.keyCode === 32 ) {
return false;
}
}
config: ToasterConfig;
private showToast(type: NbComponentStatus, body: string, title: string) {
const config = {
status: type,
destroyByClick: true,
duration: 2000,
position: NbGlobalPhysicalPosition.TOP_RIGHT,
preventDuplicates: false,
};
const titleContent = title ? `${title}` : '';
this.toastrService.show(
body,
`${titleContent}`,
config);
}
}
Spect.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EditCouponComponent } from './edit-coupon.component';
describe('EditCouponComponent', () => {
let component: EditCouponComponent;
let fixture: ComponentFixture<EditCouponComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EditCouponComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EditCouponComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
谢谢...................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ...................................
您需要在规范文件中导入声明 nb-card-header 元素的组件，并在其中提及 configureTestingModule 作为导入。
// spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EditCouponComponent } from './edit-coupon.component';
// I have assumed ng-card-header element is declared within NbComponentStatus. Use appropriate module/component.
import { NbComponentStatus } from '@nebular/theme';
describe('EditCouponComponent', () => {
let component: EditCouponComponent;
let fixture: ComponentFixture<EditCouponComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EditCouponComponent ],
imports: [ NbComponentStatus ],
})
.compileComponents();
}));
// rest of spec file code
要解决错误 Can't bind to 'ngModel' since it isn't a known property of 'input'，您需要导入 FormsModule 并以与上述类似的方式提及它。
我已经解决了添加 'NbCardModule' 的问题。