错误-失败:模板分析错误:无法绑定到“zoomLevel”,因为它不是“opr观察列表卡”的已知属性

我在项目中使用了茉莉花、因果报应和angular 7。我不知道缺少什么模块参考或组件细节,请指导我找到下面的规范和组件代码。

失败:模板分析错误: 无法绑定到“zoomLevel”,因为它不是“opr观察列表卡”的已知属性。

组成部分规格-

import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { WatchlistComponent } from './watchlist/watchlist.component';
import { WatchlistFooterComponent } from './watchlist/watchlist-footer/watchlist-footer.component';
import { WatchlistHeaderComponent } from './watchlist/watchlist-header/watchlist-header.component';
import { WatchlistCardsComponent } from './watchlist/watchlist-cards/watchlist-cards.component';
import { FormsModule } from '@angular/forms';
import { BusyOverlayModule } from '../../../app-shared/src/lib/busy-overlay/busy-overlay.module';
// import { L10nTranslationModule } from '../../../app-shared/src/lib/l10n-translation/l10n-translation.module';
// import { LocalizationService } from '../../../app-shared/src/lib/l10n-translation/localization.service';
import { WatchlistModule } from './watchlist/watchlist.module';

export class MockBusyOverlayModule {

}

describe('AppComponent', () => {
    let component: AppComponent;
    let fixture: ComponentFixture<AppComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                FormsModule, 
                BusyOverlayModule
            ],
            providers: [
                { provide: BusyOverlayModule, useClass: MockBusyOverlayModule }
            ],
            declarations: [
                AppComponent,
                WatchlistComponent,
                WatchlistFooterComponent,
                WatchlistHeaderComponent,
                // WatchlistCardsComponent
            ]
            // imports: [
            //   WatchlistModule
            // ]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create the app', () => {
        expect(component).toBeTruthy();
    });
});

组成部分ts-

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'opr-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  showBusyOverlay:boolean = true;

  ngOnInit() {
    this.showBusyOverlay = false;
  }
}

模板-

<opr-watchlist></opr-watchlist>

<opr-busy-overlay [showOverlay]="showBusyOverlay" [spinner]="true"></opr-busy-overlay>

我的手表列表卡片组件-

import { Component, EventEmitter, Input, OnInit, OnChanges, SimpleChanges,  Output } from '@angular/core';
import { CI, CiWithStatus } from '../ci-list.service';
import { ContextPanelApi } from '../../../../../../../../shared/shared-html/js/directives/oprContextPanel/oprContextPanel/oprContextPanelApi.service';
import { CiContextDataService } from '../../../../../../../../shared/shared-html/js/services/ciContextData.service';
import { CiContextMenuService } from '../../../../../app-shared/src/lib/ci-context-menu.service';
import OprContextPanelPage from '../../../../../../../../shared/shared-html/js/types/OprContextPanelPage';
@Component({
  selector: 'opr-watchlist-cards',
  templateUrl: './watchlist-cards.component.html',
  styleUrls: ['./watchlist-cards.component.scss']
})
export class WatchlistCardsComponent implements OnInit, OnChanges {

  @Input() ciList: CiWithStatus[];
  @Input() viewName: string;
  @Input() itemWidth: number;
  @Input() itemHeight: number;
  @Input() zoomLevel: number;

  @Output() onSelectedCisChanged: EventEmitter<CI[]> = new EventEmitter<CI[]>();

  private _selectedItems: CI[] = [];

  constructor(
    private _oprContextPanelApiService: ContextPanelApi,
    private _ciContextMenu: CiContextMenuService,
    private _ciContextDataService: CiContextDataService
    ) {
  }

  ngOnInit() {
    console.debug('ciList', this.ciList);
  }

  ngOnChanges(changes: SimpleChanges): void {
    if(changes.zoomLevel) {
      this.zoomLevel = changes.zoomLevel.currentValue;
    }
  }

  onItemClick(event: MouseEvent, ci: CI) {
    if (event.ctrlKey) {
      if (this.isSelected(ci)) {
        this._selectedItems.splice(this._selectedItems.indexOf(ci), 1);
      } else {
        this._selectedItems.push(ci);
      }
    } else {
      this._selectedItems = [ci];
    }
    this.onSelectedCisChanged.emit(this._selectedItems);
  }

  onItemRightClick(event: MouseEvent, ci: CI) {
    console.dir(ci);
    console.debug('Open context panel for CI', ci.name);
    const position = {left: event.clientX, top: event.clientY};
    const contextPanelConfig = {
      title: ci.name,
      subTitle: ci.type_label,
      position
    };
    let contentMenuData = this._ciContextMenu.getContextMenuData(ci.long_id,ci.id,this.viewName);
    contentMenuData.subscribe((res) =>{
      console.log('CI Context Menu Data',res);
      let parsed = this._ciContextDataService.parseContextData(res, () => this._oprContextPanelApiService.closeContext());
      let actionListTile = this._ciContextDataService.convertToActionListTile(parsed);
      let ciContextMenuPage = new OprContextPanelPage({
        id: 'ciMainPage',
        title: '',
        tiles: []
      });
      if (actionListTile) {
        ciContextMenuPage.addTile(actionListTile);
      }
      const contextPanelPages =  ciContextMenuPage.tiles.length === 0 ? [] : [ciContextMenuPage];
      this._oprContextPanelApiService.openContext(contextPanelConfig, contextPanelPages, () => {
        console.debug('Context panel closed');
      });
    },(error) => {
        console.error('Error: while fetching fata for contentMenu', error);
    });
    return false; //prevent native browser context menu
  }

  isSelected(ci: CI) {
    return this._selectedItems.includes(ci);
  }
}

查看观察列表组件-

<opr-operational-app-main class="app-main">
  <opr-watchlist-header class="app-main-header"
                        [filteredCiCount]="filteredCiCount"
                        [zoomLevel]="zoomLevel"
                        [viewName]="viewName"
                        [watchlistOptions]="currentOptions"
                        (onViewChange)="onViewChange($event)"
                        (onOptionsChange)="onOptionsChange($event)"
                        (onZoomLevelChange)="onZoomLevelChange($event)"></opr-watchlist-header>

  <opr-watchlist-cards class="app-main-body"
                       [zoomLevel]="zoomLevel"
                       [viewName]="viewName"
                       [ciList]="ciListFiltered"
                       [itemWidth]="itemWidth"
                       [itemHeight]="itemHeight"
                       (onSelectedCisChanged)="onSelectedCisChanged($event)"></opr-watchlist-cards>

  <opr-watchlist-footer class="app-main-footer"
                        ngShow="showFooter"
                        [ciStatusStatistics]="ciStatusStatistics"
                        [totalCiCount]="totalCiCount"
                        [filteredCiCount]="filteredCiCount"
                        [hideZeroCounters] = "hideZeroCounters"
                        (onZoomLevelChange)="onZoomLevelChange($event)"
                        (onSeverityFilterChange)="onSeverityFilterChange($event)"></opr-watchlist-footer>

</opr-operational-app-main>
<opr-busy-overlay [showOverlay]="showBusyOverlay"></opr-busy-overlay>

我试图在声明中添加WatchlistCardsComponent,但问题仍然存在。 http://localhost:9876/debug.html 每当我包含这个WatchlistCardsComponent时,我都试图在浏览器中调试相同的组件,但我遇到了错误 Uncaught TypeError: window.getAppConstants is not a function 在我的控制台里。 请帮帮我。谢谢