1

我正在使用 Angular 2，我需要使用数字文本框。由于 Angular 2 的 Kendo Numeric Text Box 尚未发布，所以我必须将 Kendo Numeric TextBox 与 Javascript 一起使用。但是，更改文本框中的值时不会触发更改事件。此外，剑道进度条不会显示应有的动画。有人可以帮忙吗？

谢谢

产品详细信息.component.ts

import {Component, OnInit, Input, ElementRef } from '@angular/core';
import { ToastrService } from '../shared/services/toastr.service';
import { UserService } from '../shared/services/user.service';
import { SystemAccessEnum } from '../shared/services/systemAccessEnum';

import { ProductService } from './services/product.service';
declare var jQuery: any;

@Component({
    selector: 'product-details',
    templateUrl: 'app/products/product-details.component.html',

})

export class ProductDetailsComponent implements OnInit {

    @Input() product: any;


    constructor(private elementRef: ElementRef, private toastrSvc: ToastrService, private userSvc: UserService, private systemAccessEnum: SystemAccessEnum, private productSvc: ProductService) {

    }


    ngAfterViewChecked() {
        var element = this.elementRef.nativeElement;
        var ieerRatingBar = jQuery(element).find(".ieerRatingBar");
        if (ieerRatingBar[0] != undefined &&       this.product.specifications.all.ieerNonducted) {
            jQuery(ieerRatingBar[0]).kendoProgressBar({
                animation: {
                    duration: 600
                },

                showStatus: false,
                max: 40,
                value: this.product.specifications.all.ieerNonducted.value
            });
        }




        //numeric stepper
        var numericTextBox = jQuery(element).find(".numericTextBox");
        if (numericTextBox[0] != undefined) {
            jQuery(numericTextBox[0]).kendoNumericTextBox({
                change: function () {
                    var value = this.value();
                    debugger
                    this.product.quantity = value;
                }

            });
        }

    }


};

产品详细信息.component.html

<div class="row">
    <div class="col col-md-2 product-image"><img width="135" height="100" src="{{product.image.url}}" /></div>
    <div class="col col-md-2 product-info">
        <div class="row">{{product.name}}</div>
        <div class="row">Model No.: {{product.productNumber}}</div>
        <div class="row">Price: {{product.price | currency:'USD':true:'1.2-2'}}</div>
    </div>

    <div class="col col-md-5" *ngIf="product.specifications.all != null">

        <div class="row" *ngIf="product.specifications.all.ieerNonducted">IEER (Non-Ducted): {{product.specifications.all.ieerNonducted.value | number:'1.2-2'}}</div>
        <div class="ieerRatingBar"></div>

    </div>
    <div class="col col-md-1">
        <input class="numericTextBox" type="number" value="{{product.quantity}}" min="0" max="1000" step="1" style="width: 100%;" />
    </div>
</div>
4

0 回答 0