在 angular2 的 Kendo UI 的滚动视图组件中出现错误答案

【问题标题】：Getting Error in Scroll View Component of Kendo UI for angular2在 angular2 的 Kendo UI 的滚动视图组件中出现错误
【发布时间】：2017-01-12 15:24:55
【问题描述】：

我目前正在开发 angular2 项目，该项目使用 kendo-ui 滚动视图作为 angular2 今天，当我打开我的代码并执行 npm install 并运行项目时，我遇到了错误这是完整的堆栈跟踪']

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>]

任何人都知道为什么会这样。尝试将所有与角度相关的包更新为最新的，但错误仍然是他们的。

请帮忙

【问题讨论】：

你能提供一个plunkr吗？
现在不可能，因为我现在没有使用 Kendo UI 进行滚动视图，因为 Kendo UI 仍处于测试阶段

标签： kendo-ui kendo-ui-angular2

【解决方案1】：

找到了（暂时）修复它的方法。导航到 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 "

让我知道这是否有效

【讨论】：

【解决方案2】：

我也有同样的问题。这是一个已知问题，Telerik 最终会修复它。

关注问题：https://github.com/telerik/kendo-angular2/issues/203

这与不能支持新的Angular2版本（几天前发布）有关。

今天（2017 年 1 月 24 日）发布的最新更新已修复此问题。更新你的包，它就会自行修复。

【讨论】：