Angular Karma - 无法绑定到“alwaysShowCalendars”，因为它不是“输入”的已知属性
Posted
技术标签:
【中文标题】Angular Karma - 无法绑定到“alwaysShowCalendars”，因为它不是“输入”的已知属性【英文标题】：Angular Karma - Can't bind to 'alwaysShowCalendars' since it isn't a known property of 'input' 【发布时间】：2020-11-19 02:35:06 【问题描述】：当我尝试使用 karma jsamin 进行测试时，我/我收到此错误...
Failed: Template parse errors:
Can't bind to 'alwaysShowCalendars' since it isn't a known property of 'input'. ("
ngxDaterangepickerMd
[(ngModel)]="selected"
[ERROR ->][alwaysShowCalendars]="alwaysShowCalendars"
[linkedCalendars]="true"
"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@18:12
Can't bind to 'linkedCalendars' since it isn't a known property of 'input'. ("
[alwaysShowCalendars]="alwaysShowCalendars"
[ERROR ->][linkedCalendars]="true"
[locale]="applyLabel: 'Done'"
(rangeClicked)="ra"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@20:12
Can't bind to 'locale' since it isn't a known property of 'input'. ("
[linkedCalendars]="true"
[ERROR ->][locale]="applyLabel: 'Done'"
(rangeClicked)="rangeClicked($event)"
(date"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@21:12
Can't bind to 'ranges' since it isn't a known property of 'input'. ("angeClicked)="rangeClicked($event)"
(datesUpdated)="datesUpdated($event)"
[ERROR ->][ranges]="ranges"
[keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@24:12
Can't bind to 'keepCalendarOpeningWithRange' since it isn't a known property of 'input'. ("
(datesUpdated)="datesUpdated($event)"
[ranges]="ranges"
[ERROR ->][keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
class="form-"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@25:12
Can't bind to 'nbDatepicker' since it isn't a known property of 'input'. ("
</div>
<div *ngIf="datepickerChanges">
<input [ERROR ->][nbDatepicker]="datepicker" [(ngModel)]="dateGrouped" (ngModelChange)="onDateSelect($event)">
"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@31:17
'nb-datepicker' is not a known element:
1. If 'nb-datepicker' is an Angular component, then verify that it is part of this module.
2. If 'nb-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("tepicker]="datepicker" [(ngModel)]="dateGrouped" (ngModelChange)="onDateSelect($event)">
[ERROR ->]<nb-datepicker #datepicker ></nb-datepicker>
</div>
</div>
"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@32:10
Can't bind to 'data' since it isn't a known property of 'ngx-order-payment-barchart'.
1. If 'ngx-order-payment-barchart' is an Angular component and it has 'data' input, then verify that it is part of this module.
2. If 'ngx-order-payment-barchart' 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. ("gin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart1">
<ngx-order-payment-barchart [ERROR ->][data]="data "></ngx-order-payment-barchart>
</div>
<div style="text-align: center;"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@46:39
'ngx-order-payment-barchart' is not a known element:
1. If 'ngx-order-payment-barchart' is an Angular component, then verify that it is part of this module.
2. If 'ngx-order-payment-barchart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("style="min-height: 300px;margin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart1">
[ERROR ->]<ngx-order-payment-barchart [data]="data "></ngx-order-payment-barchart>
</div>
<di"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@46:11
Can't bind to 'groupeddata' since it isn't a known property of 'ngx-order-average-cost-barchart'.
1. If 'ngx-order-average-cost-barchart' is an Angular component and it has 'groupeddata' input, then verify that it is part of this module.
2. If 'ngx-order-average-cost-barchart' 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. (";margin-bottom: 100px;" *ngIf="showBarchart2"><!-- -->
<ngx-order-average-cost-barchart [ERROR ->][groupeddata]="datagrouped "></ngx-order-average-cost-barchart>
</div>
<div style=""): ng:///DynamicTestModule/OrderAnalyticsComponent.html@62:44
'ngx-order-average-cost-barchart' is not a known element:
1. If 'ngx-order-average-cost-barchart' is an Angular component, then verify that it is part of this module.
2. If 'ngx-order-average-cost-barchart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("in-height: 300px;margin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart2"><!-- -->
[ERROR ->]<ngx-order-average-cost-barchart [groupeddata]="datagrouped "></ngx-order-average-cost-barchart>
"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@62:11
我的组件
import Component, OnInit from '@angular/core';
import NgxSpinnerService from 'ngx-spinner';
import ApiService from '../../../services/api.service';
import * as moment from 'moment';
@Component(
selector: 'ngx-item-analytics',
templateUrl: './item-analytics.component.html',
styleUrls: ['./item-analytics.component.scss']
)
export class ItemAnalyticsComponent implements OnInit
data: any;
data2: any;
showBarchart1: boolean = false;
showBarchart2: boolean = false;
maxDate: moment.Moment;
minDate: moment.Moment;
datepickerChanges:boolean = false;
dateGrouped:Date;
alwaysShowCalendars: boolean;
keepCalendarOpeningWithRange: boolean;
showRangeLabelOnInput: boolean;
invalidDates: moment.Moment[] = [];
selected: any;
startDate:any;
endDate:any;
datagroupedChart:boolean=false;
datagrouped:any[] =[];
venues: any = [];
selectedVenue: any = 'Oahu';
selVenue: any;
ranges: any =
Today: [moment(), moment()],
Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [
moment()
.subtract(1, 'month')
.startOf('month'),
moment()
.subtract(1, 'month')
.endOf('month')
],
'Last 3 Month': [
moment()
.subtract(3, 'month')
.startOf('month'),
moment()
.subtract(1, 'month')
.endOf('month')
]
;
isInvalidDate = (m: moment.Moment) =>
return this.invalidDates.some(d => d.isSame(m, 'day') );
timezone: any;
constructor(private spinner: NgxSpinnerService,
private apiService: ApiService,)
this.datagrouped = ["State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496,"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223,"State":"NY","Under 5 Years":1208495,"5 to 13 Years":2141490,"14 to 17 Years":1058031,"18 to 24 Years":1999120,"25 to 44 Years":5355235,"45 to 64 Years":5120254,"65 Years and Over":2607672,"State":"FL","Under 5 Years":1140516,"5 to 13 Years":1938695,"14 to 17 Years":925060,"18 to 24 Years":1607297,"25 to 44 Years":4782119,"45 to 64 Years":4746856,"65 Years and Over":3187797,"State":"IL","Under 5 Years":894368,"5 to 13 Years":1558919,"14 to 17 Years":725973,"18 to 24 Years":1311479,"25 to 44 Years":3596343,"45 to 64 Years":3239173,"65 Years and Over":1575308,"State":"PA","Under 5 Years":737462,"5 to 13 Years":1345341,"14 to 17 Years":679201,"18 to 24 Years":1203944,"25 to 44 Years":3157759,"45 to 64 Years":3414001,"65 Years and Over":1910571];
this.maxDate = moment().add(0, 'weeks');
this.minDate = moment().subtract(3, 'days');
this.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
this.alwaysShowCalendars = true;
this.keepCalendarOpeningWithRange = true;
this.showRangeLabelOnInput = true;
this.dateGrouped = new Date()
this.selected = startDate: moment().subtract(30, 'days'), endDate: moment();
setTimeout(() =>
this.invalidDates = [moment().add(2, 'days'), moment().add(3, 'days'), moment().add(5, 'days')];
, 5000);
var m = moment(this.selected.startDate);
m.set(hour:0,minute:0,second:0,millisecond:0)
this.startDate = m.format('YYYY-MM-DD 00:00');
this.endDate = moment(this.selected.endDate).format('YYYY-MM-DD 23:59');
rangeClicked(range)
datesUpdated(range)
var m = moment(this.selected.startDate);
m.set(hour:0,minute:0,second:0,millisecond:0)
this.startDate = m.format('YYYY-MM-DD 00:00');
this.endDate = moment(this.selected.endDate).format('YYYY-MM-DD 23:59');
this.viaAirportAnalytics();
viaAirportAnalytics()
var statrdate = new Date(this.startDate).toISOString();
var endDate = new Date(this.endDate).toISOString();
this.spinner.show();
this.apiService.getVenues().subscribe((res)=>
this.spinner.hide();
this.venues = res.body.venues;
this.selVenue = this.venues[0];
for(let sel of this.venues)
if(sel.name == this.selectedVenue)
this.selVenue = sel;
let arg =
startDate:statrdate,
endDate:endDate,
venueId:this.selVenue._id
this.spinner.show();
this.apiService.getItemAnalyticsItemCatogory(arg).subscribe((res)=>
this.spinner.hide();
let dataChart = [];
res.chartData.map(data =>
dataChart.push(
gate:data.category, deliveries: data.count)
)
if(dataChart.length>0)
this.showBarchart1 = true;
this.data = dataChart;
else
this.showBarchart1 = false;
);
this.spinner.show();
this.apiService.getItemAnalyticsItems(arg).subscribe((res)=>
this.spinner.hide();
let dataChart = [];
res.chartData.map(data =>
dataChart.push(
gate:data.menuItem, deliveries: data.count)
)
if(dataChart.length>0)
this.showBarchart2 = true;
this.data2 = dataChart;
else
this.showBarchart2 = false;
);
);
onDateSelect(event)
var m = moment(event);
m.set(hour:0,minute:0,second:0,millisecond:0)
var r = moment(event);
r.set(hour:23,minute:59,second:59,millisecond:59)
this.startDate = m.format('YYYY-MM-DD 00:00');
this.endDate = r.format('YYYY-MM-DD 23:59');
ngOnInit()
规格.ts
import async, ComponentFixture, TestBed from '@angular/core/testing';
import ItemAnalyticsComponent from './item-analytics.component';
import FormsModule, ReactiveFormsModule from '@angular/forms';
import NbCardModule, NbCalendarKitModule, NbCalendarRangeModule, NbCalendarModule, NbDatepickerModule from '@nebular/theme';
import MatDatepickerModule, NativeDateModule from '@angular/material';
describe('ItemAnalyticsComponent', () =>
let component: ItemAnalyticsComponent;
let fixture: ComponentFixture<ItemAnalyticsComponent>;
beforeEach(async(() =>
TestBed.configureTestingModule(
imports:
[
FormsModule,
ReactiveFormsModule,
NbCardModule,
NbCalendarModule,
NbCalendarKitModule,
NbCalendarRangeModule,
MatDatepickerModule,
NbDatepickerModule,
NativeDateModule
],
declarations:
[
ItemAnalyticsComponent
]
)
.compileComponents();
));
beforeEach(() =>
fixture = TestBed.createComponent(ItemAnalyticsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
);
it('should create', () =>
expect(component).toBeTruthy();
);
);
谢谢.................................................. ..................................................... ..................................................... ..................................................... ....................
【问题讨论】：
您确定已导入所有必需的modules 吗？
我已经分享了我的规范文件...在那个里面，我已经导入了所有模块...
嗨，我已经通过导入 NgxDaterangepickerMd 解决了这个问题。
【参考方案1】：
我已经通过导入“NgxDaterangepickerMd”解决了这个问题
【讨论】：
以上是关于Angular Karma - 无法绑定到“alwaysShowCalendars”，因为它不是“输入”的已知属性的主要内容，如果未能解决你的问题，请参考以下文章
Angular Karma - 无法绑定到“数据”，因为它不是“ngx-item-category-barchart”的已知属性
Karma 测试 Angular - TypeError：无法读取 null 的属性“recipientAddressId”
Angular Karma Jasmine 错误：非法状态：无法加载指令摘要
[karma-server]：TypeError：无法读取未定义的属性“范围”-CI 环境中的 Angular 单元测试
Angular Karma - TypeError：无法读取未定义的属性“_id”
未捕获的类型错误：无法读取未定义抛出的属性“coSearchCriteria” - Angular Karma/Jasmine