Kendo UI添加到Angular 4应用时会创建一个双重输入 [英] Kendo UI creates a double input when added to Angular 4 app

问题描述

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

I'm working on ASP.NET MVC app. I have recently added Angular 4 to it and now I'm trying to use some Kendo UI controls. I've added it in the same way as suggested at https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/

但是，像这里一样，而不是只有一个输入字段 双输入.我检查了源代码，并生成了以下html. 知道为什么它不能按预期工作吗?

However instead of having a single input field like here, I'm getting a double input. I've checked the source code and it generated the following html. Any idea why it doesn't work as supposed to?

在我的html中，我只是这样:

In my html I put just that:

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

推荐答案

我设法通过将我的所有剑道等CDN更新到最新版本来解决了该问题.实际上可能是jQuery导致了此问题.也许它与Angular 4不兼容

I managed to fix it by updating all my kendo, etc. CDNs to the latest version. It might be actually jQuery that was causing this issue. Perhaps it is not compatible with Angular 4

这篇关于Kendo UI添加到Angular 4应用时会创建一个双重输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！