0

我正面临这个错误,我找不到问题所在。 错误截图

该错误表明问题来自 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
]

})

这是我的第一篇文章,所以我不知道是否应该添加更多代码或信息,如果缺少某些内容,请告诉我。

预先感谢您的帮助!!

4

1 回答 1

0

我解决了它,错误实际上来自拆分器的错误实现,我删除了主拆分器窗格和顶部拆分器之间的 div,它解决了我的问题

于 2020-12-15T13:31:36.563 回答