我正面临这个错误,我找不到问题所在。 错误截图
该错误表明问题来自 SplitterBarComponent.html,但我无法弄清楚如何解决它,因为与我使用的 kendo 库组件关联的模块已正确导入。
这是我使用 kendo 库的 html 代码的一部分:
`enter code here`<kendo-splitter id="dash-first-splitter" orientation="'horizontal'" style="height: 100%; width: 100%; border:0;">
<div id="dashboard-central-pane">
<kendo-splitter-pane size="240px" [resizable]="false" [collapsible]="true" id="dash-second-splitter"
style="height: 100%; border:0;">
<div id="dashboard-top-pane">
<kendo-splitter id='dash-third-splitter' orientation="'horizontal'" style="border:0;">
<kendo-splitter-pane [collapsible]="true">
<div class="dashboardJobTitle">My Jobs</div>
<div class="form-control form-control-saga">
<kendo-dropdownlist
[(ngModel)]="selectedFilterFinishedJobs"
[data]="jobFilterSource"
(ngModelChange)="getFinishedJobs()"
[textField]="field"
[valueField]="id"
[valuePrimitive]="true">
</kendo-dropdownlist>
</div>
<button class="dashboardButton k-button" [hidden]="selectedFilterFinishedJobs !== 1 "
[disabled]="relaunchexitdisabled || selectedFilterFinishedJobs === 0"
(click)="relaunchExitJobs()">Relaunch - Exit</button>
<div class="glyphicon glyphicon-refresh dashboard-glyphicon" aria-hidden="true"
(click)="getFinishedJobs()" title="Refresh jobs list"></div>
<div id="admin-extension" class="grid-wrapper" [style.height.px]="kgridHeight">
<kendo-grid
id="dash-finishedjobs-grid"
[data]="jobsGridData"
[height]="kgridHeight"
[pageSize]="stateFinishedJobs.take"
[pageable]="true"
[pageSize]="5"
[sortable]="true"
filterable="row"
[skip]= "stateFinishedJobs.skip"
[sort]="stateFinishedJobs.sort"
[filter]="stateFinishedJobs.filter"
[scrollable]="'scrollable'">
<kendo-grid-column field="selected" title="Job name">
<ng-template kendoGridHeaderTemplate let-dataItem>
<div><input type='checkbox' [(ngModel)]='allFinishedjobsChecked' [attr.disabled]="selectedFilterFinishedJobs === 0" (ngModelChange)="checkAllJobs('finished')"></div>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<input type='checkbox' class='jobs-checkbox' [(ngModel)]='dataItem.selected' [attr.disabled]="dataItem.type ==='single' " (click)="onCheckJob('finished',dataItem)">
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="jobname" title="Job name">
<ng-template kendoGridCellTemplate let-dataItem>
<div class='gridContent row-overflow' title='{{dataItem.jobName}}'>{{dataItem.jobName}}</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="startdate">
<ng-template kendoGridHeaderTemplate let-dataItem>
<span *ngIf='selectedFilterFinishedJobs != 0' title='Only the last 20 days old jobs are displayed'>Submit Date</span><span *ngIf='selectedFilterFinishedJobs == 0' title='Only the last 7 days old jobs are displayed'>Submit Date</span>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<div class='gridContent row-overflow' title="{{dataItem.startdate|date:'dd/MMM/yyyy HH:mm'}}">{{dataItem.startdate|date:'dd/MMM/yyyy HH:mm'}}</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="jobstatus" title="Status">
<ng-template kendoGridCellTemplate let-dataItem>
<div class='gridContent row-overflow jobs-{{statusService.getStatusColor(dataItem.jobstatus)}} jobs-grid-status' popover-trigger='mouseenter' title="{{statusService.getStatusTitle(dataItem.jobstatus)}}">{{dataItem.jobstatus}}</div>
</ng-template>
</kendo-grid-column>
</kendo-grid>
<div *ngIf="isLoading" class="k-i-loading">
<div class="loader"></div>
<div class="grid-loader-section"></div>
</div>
</div>
</kendo-splitter-pane>
<kendo-splitter-pane [collapsible]="true">
<div class="dashboardJobTitle">Syndeo news</div>
<div class="breaking-news-div">
<div [innerHtml]="dashBoardHtml"></div>
</div>
</kendo-splitter-pane>
</kendo-splitter>
</div>
</kendo-splitter-pane>
<kendo-splitter-pane [collapsible]="true" [resizable]="flase">
<kendo-splitter id="dash-fourth-splitter" style="border:0;">
<kendo-splitter-pane [collapsible]="true" id="dashb">
<div class="favoriteselected" style="float:left"
title="Only favorite tools are displayed in the dashboard">
</div>
<div class="dashboardJobTitle">
My Favourite Tools
</div>
<div id="dash-toollist" >
<ng-template kendoGridCellTemplate let-dataItem>
<div class="tool-icon" k-template ng-class="{'tool-icon-container': dataItem.isContainer}" title="{{dataItem.name}} / {{dataItem.version}}">
<div class="tool-block-dash">
<div (click)="openTool(dataItem)">
<div class="tool-box tool-box-mid">
<img [src]="getIcon(dataItem.icon)"
alt="{{dataItem.name}}" />
<h3>{{dataItem.name}}</h3>
</div>
</div>
</div>
</div>
</ng-template>
</div>
</kendo-splitter-pane>
<kendo-splitter-pane [collapsible]="true">
<div class="dashboardJobTitle">My Operations</div>
<div class="glyphicon glyphicon-refresh dashboard-glyphicon" aria-hidden="true"
(click)="getFinishedJobs()" title="Refresh jobs list">
</div>
<div id="admin-extension" class="grid-wrapper" [style.height.px]="kgridHeight">
<kendo-grid
id="dash-finishedjobs-grid"
[data]="jobsGridData"
[height]="kgridHeight"
[pageSize]="stateFinishedJobs.take"
[pageable]="true"
[pageSize]="5"
[sortable]="true"
filterable="row"
[skip]= "stateFinishedJobs.skip"
[sort]="stateFinishedJobs.sort"
[filter]="stateFinishedJobs.filter"
[scrollable]="'scrollable'">
<kendo-grid-column field="selected" title="Action">
<ng-template kendoGridHeaderTemplate let-dataItem>
<div class='gridContent row-overflow' title='{{dataItem.operationType}}'>{{dataItem.operationType}}</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="jobname" title="Description">
<ng-template kendoGridCellTemplate let-dataItem>
<a class='gridContent row-overflow' title='{{dataItem.description}}' *ngIf="dataItem.operationType == 'RENAME REPORT' && dataItem.operationType != 'LTS REPORT' && dataItem.status == 'DONE'" [href] = "getUrl(dataItem.description)" target='_blank'>{{dataItem.description}}</a>
<div class='gridContent row-overflow' title='{{dataItem.description}}' *ngIf="dataItem.operationType != 'LTS REPORT' && dataItem.operationType != 'RENAME REPORT' && dataItem.status == 'DONE WITH ERRORS' && dataItem.progress == '100' && dataItem.operationType.indexOf('DECLARE') == -1">{{dataItem.description}}</div>
<a class='gridContent row-overflow' title='{{dataItem.description}}' *ngIf="dataItem.operationType != 'LTS REPORT' && dataItem.operationType != 'RENAME REPORT' && dataItem.status == 'DONE WITH ERRORS' && dataItem.progress == '100' && dataItem.operationType.indexOf('DECLARE') > -1" [href] = "getUrl(dataItem.description)" target='_blank'>{{dataItem.description}}</a>
<div class='gridContent row-overflow' title='{{dataItem.description}}' *ngIf="dataItem.operationType != 'LTS REPORT' && dataItem.operationType != 'RENAME REPORT' && dataItem.status == 'EXIT' && dataItem.progress == '100' && dataItem.operationType.indexOf('DECLARE') == -1">{{dataItem.description}}</div>
<a class='gridContent row-overflow' title='{{dataItem.description}}' *ngIf="dataItem.operationType != 'LTS REPORT' && dataItem.operationType != 'RENAME REPORT' && dataItem.status == 'EXIT' && dataItem.progress == '100' && dataItem.operationType.indexOf('DECLARE') > -1" [href] = "getUrl(dataItem.description)" target='_blank'>{{dataItem.description}}</a>
<div class='gridContent row-overflow' title='{{dataItem.description}}' *ngIf="dataItem.operationType != 'LTS REPORT' && dataItem.operationType != 'RENAME REPORT' && dataItem.status == 'DONE'">{{dataItem.description}}</div>
<div class='gridContent row-overflow' title='{{dataItem.description}}' *ngIf="dataItem.operationType != 'LTS REPORT' && dataItem.operationType != 'RENAME REPORT' && dataItem.progress != '100'">{{dataItem.description}}</div>
<a class='gridContent row-overflow' title='{{dataItem.description}}' *ngIf="dataItem.operationType == 'LTS REPORT' && dataItem.operationType != 'RENAME REPORT' && dataItem.status == 'DONE'" [href] = "getUrl(dataItem.description)" target='_blank'>{{dataItem.description}}</a>
<div class='gridContent row-overflow' title='{{dataItem.description}}' *ngIf="dataItem.operationType == 'LTS REPORT' && dataItem.operationType != 'RENAME REPORT' && dataItem.progress != '100'">{{dataItem.description}}</div>
<div class='gridContent row-overflow' title='{{dataItem.description}}' *ngIf="dataItem.operationType == 'LTS REPORT' && dataItem.operationType != 'RENAME REPORT' && dataItem.progress == 'EXIT'">{{dataItem.description}}</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="startdate">
<ng-template kendoGridCellTemplate let-dataItem>
<div class='gridContent row-overflow' title="{{dataItem.operationDate|date:'dd/MMM/yyyy HH:mm'}}">{{dataItem.operationDate|date:'dd/MMM/yyyy HH:mm'}}</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="jobstatus" title="Status">
<ng-template kendoGridCellTemplate let-dataItem>
<div class='jobs-{{statusService.getStatusColor(dataItem.status)}} jobs-grid-status' popover-trigger='mouseenter'>
<kendo-progressbar *ngIf='dataItem.progress != 100' [(ngModel)]='dataItem.progress' style='width: 100%;' [value]="dataItem.progress"></kendo-progressbar>
<div *ngIf='dataItem.progress == 100' class='gridContent row-overflow'>{{dataItem.status}}</div>
</div>
</ng-template>
</kendo-grid-column>
</kendo-grid>
<div *ngIf="isLoading" class="k-i-loading">
<div class="loader"></div>
<div class="grid-loader-section"></div>
</div>
</div>
</kendo-splitter-pane>
</kendo-splitter>
</kendo-splitter-pane>
</div>
</kendo-splitter>
以及使用kend库的组件的模块:
@NgModule({
imports: [ GridModule, ProgressBarModule, DropDownsModule, HttpClientModule, WindowModule, ReactiveFormsModule,
FormsModule, BrowserAnimationsModule, ButtonModule, ButtonGroupModule, DropDownsModule, SplitterModule, RouterModule.forRoot(DASHBOARD_ROUTES)],
declarations: [
DashboardComponent
],
entryComponents: [
DashboardComponent
],
providers: [
NgTemplateService, NgAuthentService
]
})
这是我的第一篇文章,所以我不知道是否应该添加更多代码或信息,如果缺少某些内容,请告诉我。
预先感谢您的帮助!!