Kendo의 scroll View Component에서 angular2에 대한 UI보기

Question

현재 angular2에 대한 kendo-ui scrollview를 사용하는을 사용중인 angular2 프로젝트에서 현재 코드를 열고 npm을 설치하고 프로젝트를 실행했을 때 오류가 발생했습니다. 전체 스택 추적입니다 ']

Error: Uncaught (in promise): Error: Template parse errors: 
TypeError: Cannot read property 'toUpperCase' of undefined ("   <span class="k-icon k-i-arrowhead-e"></span> 
    </a> 
    <kendo-scrollview-pager [ERROR ->]*ngIf(pageable) 
     (pagerIndexChange)="pageChange($event)" 
     [data]="data" 
"): ScrollViewComponent@33:32 
Parser Error: Unexpected token :, expected identifier, keyword, or string at column 1 in [] in ScrollViewComponent@33:32 (" 
    </a> 
    <kendo-scrollview-pager *ngIf(pageable) 
     [ERROR ->](pagerIndexChange)="pageChange($event)" 
     [data]="data" 
     [activeIndex]="activeIndex""): ScrollViewComponent@34:10 
Parser Error: Unexpected token :, expected identifier, keyword, or string at column 1 in [] in ScrollViewComponent@33:32 ("<kendo-scrollview-pager *ngIf(pageable) 
     (pagerIndexChange)="pageChange($event)" 
     [ERROR ->][data]="data" 
     [activeIndex]="activeIndex"> 
    </kendo-scrollview-pager> 
"): ScrollViewComponent@35:10 
Parser Error: Unexpected token :, expected identifier, keyword, or string at column 1 in [] in ScrollViewComponent@33:32 (" 
     (pagerIndexChange)="pageChange($event)" 
     [data]="data" 
     [ERROR ->][activeIndex]="activeIndex"> 
    </kendo-scrollview-pager> 
    </div> 
"): ScrollViewComponent@36:10 
Error: Template parse errors: 
TypeError: Cannot read property 'toUpperCase' of undefined ("   <span class="k-icon k-i-arrowhead-e"></span> 
    </a> 
    <kendo-scrollview-pager [ERROR ->]*ngIf(pageable) 
     (pagerIndexChange)="pageChange($event)" 
     [data]="data" 
"): ScrollViewComponent@33:32 
Parser Error: Unexpected token :, expected identifier, keyword, or string at column 1 in [] in ScrollViewComponent@33:32 (" 
    </a> 
    <kendo-scrollview-pager *ngIf(pageable) 
     [ERROR ->](pagerIndexChange)="pageChange($event)" 
     [data]="data" 
     [activeIndex]="activeIndex""): ScrollViewComponent@34:10 
Parser Error: Unexpected token :, expected identifier, keyword, or string at column 1 in [] in ScrollViewComponent@33:32 ("<kendo-scrollview-pager *ngIf(pageable) 
     (pagerIndexChange)="pageChange($event)" 
     [ERROR ->][data]="data" 
     [activeIndex]="activeIndex"> 
    </kendo-scrollview-pager> 
"): ScrollViewComponent@35:10 
Parser Error: Unexpected token :, expected identifier, keyword, or string at column 1 in [] in ScrollViewComponent@33:32 (" 
     (pagerIndexChange)="pageChange($event)" 
     [data]="data" 
     [ERROR ->][activeIndex]="activeIndex"> 
    </kendo-scrollview-pager> 
    </div> 
"): ScrollViewComponent@36:10 
at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:119575:27) [<root>] 
at new SyntaxError (http://localhost:4200/vendor.bundle.js:7163:16) [<root>] 
at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:26588:19) [<root>] 
at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:66630:68) [<root>] 
at http://localhost:4200/vendor.bundle.js:66513:62 [<root>] 
at Set.forEach (native) [<root>] 
at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:66513:19) [<root>] 
at createResult (http://localhost:4200/vendor.bundle.js:66396:19) [<root>] 
at Zone.run (http://localhost:4200/vendor.bundle.js:175827:43) [<root> => <root>] 
at http://localhost:4200/vendor.bundle.js:176234:57 [<root>] 
at Zone.runTask (http://localhost:4200/vendor.bundle.js:175865:47) [<root> => <root>] 
at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:176132:35) [<root>] 
at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:119575:27) [<root>] 
at new SyntaxError (http://localhost:4200/vendor.bundle.js:7163:16) [<root>] 
at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:26588:19) [<root>] 
at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:66630:68) [<root>] 
at http://localhost:4200/vendor.bundle.js:66513:62 [<root>] 
at Set.forEach (native) [<root>] 
at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:66513:19) [<root>] 
at createResult (http://localhost:4200/vendor.bundle.js:66396:19) [<root>] 
at Zone.run (http://localhost:4200/vendor.bundle.js:175827:43) [<root> => <root>] 
at http://localhost:4200/vendor.bundle.js:176234:57 [<root>] 
at Zone.runTask (http://localhost:4200/vendor.bundle.js:175865:47) [<root> => <root>] 
at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:176132:35) [<root>] 
at resolvePromise (http://localhost:4200/vendor.bundle.js:176200:31) [<root>] 
at resolvePromise (http://localhost:4200/vendor.bundle.js:176185:17) [<root>] 
at http://localhost:4200/vendor.bundle.js:176234:17 [<root>] 
at Zone.runTask (http://localhost:4200/vendor.bundle.js:175865:47) [<root> => <root>] 
at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:176132:35) [<root>] 

아무도 이런 일이 발생하는 이유를 알고 있습니다. 모든 각도 관련 패키지를 최신으로 업데이트했지만 오류는 여전히 있습니다.

도와주세요

Answer 1

나는 같은 문제가 있습니다. 알려진 문제이며 Telerik이 결국 해결할 것입니다.

이 문제를 따르십시오 : https://github.com/telerik/kendo-angular2/issues/203

그것은 (몇 일 전 출시) 새로운 Angular2 버전을 지원 할 수 없다는 함께 할 수있는 뭔가가.

오늘 발표 된 최신 업데이트 (2017 년 1 월 24 일)로 문제가 해결되었습니다. 패키지를 업데이트하면 수정 될 것입니다.

Answer 2

(일시적으로) 문제를 해결하는 방법을 찾았습니다. kendo-angular-scrollview 폴더로 이동합니다. \ node_modules \ @progress \ kendo-angular-scrollview \ dist \ es \ scrollview.component.js.

이동 312 라인 여기에이 코드로 대체합니다 :

template: "\n <ul class='k-scrollview'\n [ngStyle]=\"transitionStyle\"\n [@animateTo]=\"animationState\"\n (@animateTo.done)= \"transitionEndHandler($event)\"\n (kendo.drag) = \"handleDrag($event)\"\n (kendo.press) = \"handlePress($event)\"\n (kendo.release) = \"handleRelease($event)\"\n kendoDraggable>\n <li *ngFor=\"let item of view;let i=index\"\n [ngStyle]=\"inlineStyles(i)\"\n [attr.aria-hidden]=\"i !== 1\">\n <template\n [ngTemplateOutlet]=\"itemTemplateRef\"\n [ngOutletContext]=\"{ item: item }\">\n </template>\n </li>\n </ul>\n <div class='k-scrollview-elements'\n [ngStyle]=\"{'height': height}\"\n *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n <a class=\"k-scrollview-prev\"\n aria-label=\"previous\"\n *ngIf=\"arrows && displayPrevArrow()\"\n (click)=\"prev()\">\n <span class=\"k-icon k-i-arrowhead-w\"></span>\n </a>\n <a class=\"k-scrollview-next\"\n aria-label=\"next\"\n *ngIf=\"arrows && displayNextArrow()\"\n (click)=\"next()\">\n <span class=\"k-icon k-i-arrowhead-e\"></span>\n </a>\n </div>\n "

이이