Kendo UI 添加到 Angular 4 应用程序时创建双输入

Question

我正在开发 ASP.NET MVC 应用程序。我最近向其中添加了 Angular 4，现在我正在尝试使用一些 Kendo UI 控件。我按照 https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/

中建议的相同方式添加了它

然而，我得到的不是单一输入字段 like here，而是双重输入。我检查了源代码，它生成了以下 html。知道为什么它不能按预期工作吗？

在我的 html 中，我只是这样说：

<kendo-numerictextbox>
    [value]="value" [min]="0" [max]="100" [autoCorrect]="autoCorrect">
</kendo-numerictextbox>

生成html:

<kendo-numerictextbox class="ng-tns-c0-0 k-widget k-numerictextbox" ng-reflect-auto-correct="false" ng-reflect-max="100" ng-reflect-min="0" ng-reflect-value="5" dir="ltr">
    <span class="k-widget k-numerictextbox" style="">
        <span class="k-numeric-wrap k-state-default">
            <input type="text" class="k-formatted-value k-input" tabindex="0" title="" aria-disabled="false" aria-readonly="false" style="display: inline-block;">
            <input data-role="numerictextbox" role="spinbutton" class="k-input" type="text" aria-valuenow="" aria-disabled="false" aria-readonly="false" style="display: none;">
                <span class="k-select">
                    <span unselectable="on" class="k-link" style="touch-action: pan-y;">
                        <span unselectable="on" class="k-icon k-i-arrow-n" title="Increase value">Increase value</span>
                    </span>
                    <span unselectable="on" class="k-link" style="touch-action: pan-y;"><span unselectable="on" class="k-icon k-i-arrow-s" title="Decrease value">Decrease value</span>
                </span>
            </span>
        </span>
    </span>
    <!--bindings={
  "ng-reflect-decrement": "Decrease value",
  "ng-reflect-increment": "Increase value"
    }-->
    <span class="k-numeric-wrap">
        <input autocomplete="off" autocorrect="off" class="k-input k-formatted-value" role="spinbutton" ng-reflect-events="[object Object]" id="f663efa5-b8d0-a63d-ffaf-4bd8ca1bbfb9" aria-valuemin="0" aria-valuemax="100" title="" tabindex="0">
        <!--bindings={
"ng-reflect-ng-if": "true"
}--><span class="k-select" ng-reflect-events="[object Object]">
            <span class="k-link k-link-increase" aria-label="Increase value" title="Increase value">
                <span class="k-icon k-i-arrow-n"></span>
            </span>
            <span class="k-link k-link-decrease" aria-label="Decrease value" title="Decrease value">
                <span class="k-icon k-i-arrow-s"></span>
            </span>
        </span>
    </span>
  </kendo-numerictextbox>

Answer 1

我设法通过将我的所有 kendo 等 CDN 更新到最新版本来修复它。可能实际上是 jQuery 导致了这个问题。可能不兼容 Angular 4

Kendo UI 添加到 Angular 4 应用程序时创建双输入

Kendo UI creates a double input when added to Angular 4 app

kendo-ui

kendo-asp.net-mvc

kendo-ui-angular2

angular