错误-失败：模板解析错误：无法绑定到“ zoomLevel”，因为它不是“ opr-watchlist-cards”的已知属性

Question

我在项目中使用茉莉，业力和Angle 7。我不知道缺少哪些模块参考或组件详细信息，请引导我在下面找到规格和组件代码。

失败：模板解析错误： 无法绑定到“ zoomLevel”，因为它不是“ opr-watchlist-cards”的已知属性。

component.spec.ts-

delete

component.ts-

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

模板-

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;
  }
}

我的WatchlistCardsComponent-

<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);
  }
}

我试图在声明中添加WatchlistCardsComponent，但问题仍然存在。 http://localhost:9876/debug.html每当我包含此WatchlistCardsComponent时，我都试图在浏览器中对其进行调试，但我的控制台中出现错误<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> 。 请帮我。谢谢。