Angular Karma - 无法绑定到 'alwaysShowCalendars',因为它不是 'input' 的已知 属性

Angular Karma - Can't bind to 'alwaysShowCalendars' since it isn't a known property of 'input'

当我尝试使用 karma jsamin 进行测试时,i/m 收到此错误...

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

}

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

谢谢...................................... ..................................................... ..................................................... ..................................................... ...................................

我已经通过导入 'NgxDaterangepickerMd'

解决了这个问题