Angular Karma - 无法绑定到“数据”，因为它不是“ngx-item-category-barchart”的已知属性

Posted 2023-03-16

【中文标题】Angular Karma - 无法绑定到“数据”，因为它不是“ngx-item-category-barchart”的已知属性

【英文标题】：Angular Karma - Can't bind to 'data' since it isn't a known property of 'ngx-item-category-barchart'

【发布时间】：2020-11-21 22:19:13

【问题描述】：

当我尝试使用 karma jsamin 进行测试时，我收到此错误：

失败：模板解析错误：

如果“ngx-item-category-barchart”是一个 Angular 组件并且它有“数据”输入，那么验证它是这个模块的一部分。

如果“ngx-item-category-barchart”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”。 ("gin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart1"> ][data]="data ">

我的组件

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.getItemAnalyticsItemCategory(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()  

HTML

<nb-card>
  <nb-card-header>
    Item Analytics
  </nb-card-header>

  <nb-card-body style="min-height: 523px;">
        
    <div class="row">
      <div class="row" style="position: relative;top: 25px;text-align: center;width: 100%;">
        <div class="col-xxxl-2 col-xxl-2 col-lg-2 col-md-2" style="margin-top: 3%;text-align: right;">
          Island:
      </div>
      
      <div class="col-xxxl-7 col-xxl-7 col-lg-7 col-md-7" style="margin-top: 27px;">
        <div>
          <select class="selectbox" [(ngModel)]="selectedVenue" (change)="viaAirportAnalytics();">
            <option *ngFor="let venue of venues" value="venue.name">venue.name</option>
          </select>
        </div>
      </div>
      </div>
    </div>
    <div class="row">
      <div class="row" style="position: relative;top: 25px;text-align: center;width: 100%;">
        <div class="col-xxxl-2 col-xxl-2 col-lg-2 col-md-2" style="margin-top: 3%;text-align: right;">
          Date Range:
      </div>
      
      <div class="col-xxxl-7 col-xxl-7 col-lg-7 col-md-7" style="margin-top: 27px;">
        <div *ngIf="!datepickerChanges">
          <input type="text" style="width: 40%;"
            ngxDaterangepickerMd
            [(ngModel)]="selected"
            [alwaysShowCalendars]="alwaysShowCalendars"  
           
            [linkedCalendars]="true"
            [locale]="applyLabel: 'Done'"
            (rangeClicked)="rangeClicked($event)"
            (datesUpdated)="datesUpdated($event)"
            [ranges]="ranges"
            [keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
            
            class="form-control"
            placeholder="Please select date range"/>
        </div>
        <div *ngIf="datepickerChanges">
          <input [nbDatepicker]="datepicker" [(ngModel)]="dateGrouped" (ngModelChange)="onDateSelect($event)">
          <nb-datepicker #datepicker ></nb-datepicker>
        </div>
      </div>
      </div>
    </div>

    <div class="row">
      <div class="row" style="position: relative;top: 25px;text-align: center;width: 100%;">
          <div class="col-xxxl-12 col-xxl-12 col-lg-12 col-md-12" style="margin-top: 0.5%;">
            <h6>Item Category Frequency</h6>
          </div>
      </div>
      <div class="col-xxxl-12 col-xxl-12 col-lg-12 col-md-12" >
        <div style="min-height: 300px;margin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart1">
           <ngx-item-category-barchart [data]="data "></ngx-item-category-barchart>
        </div>
        <div style="text-align: center;min-height: 300px;margin-top: 10%;" *ngIf="!showBarchart1">
          <p style="font-weight: 600;">No Data to Show</p>
        </div>
      </div>
    </div>
    
    <div class="row">
      <div class="row" style="position: relative;top: 25px;text-align: center;width: 100%;">
          <div class="col-xxxl-12 col-xxl-12 col-lg-12 col-md-12" style="margin-top: 0.5%;">
            <h6>Top 5 Items</h6>
          </div>
      </div>
      <div class="col-xxxl-12 col-xxl-12 col-lg-12 col-md-12" >
        <div style="min-height: 300px;margin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart2">
           <ngx-items-barchart [data]="data2 "></ngx-items-barchart>
        </div>
        <div style="text-align: center;min-height: 300px;margin-top: 10%;" *ngIf="!showBarchart2">
          <p style="font-weight: 600;">No Data to Show</p>
        </div>
      </div>
    </div>
    
  </nb-card-body>
<nb-card>

规格.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();
  );
);

谢谢

【问题讨论】：

它是 类别 - 不是“类别” .... 酷...这是组件名称... 您似乎没有将暴露ngx-item-category-barchart 的模块导入您的测试。您需要这样做才能让 Karma 能够构建夹具。

【参考方案1】：

通过添加这个来解决问题，

schemas: [CUSTOM_ELEMENTS_SCHEMA]