如何在构造函数typescript中5秒后更新作用域值

how to update scope value after 5 sec in constructor typescript

本文关键字:更新 作用域 5秒 构造函数 typescript      更新时间:2023-09-26

我正面临一个问题,我必须在5秒后刷新范围值。这是我的控制器构造函数,我在其中初始化值并调用超时函数以在5秒后刷新内容。

static $inject = ['$scope', 'selectedCardAccount', 'CardService', 'ecAnimationService', '$interval', '$modal','$rootScope','$timeout','PromiseTimeout','$q','$stateParams'];
            constructor(public $scope,public selectedCardAccount, public CardService:services.CardService, public $interval:ng.IIntervalService, public $modal,public $rootScope:ng.IRootScopeService, public $timeout,public PromiseTimeout,public $q,public TrackPendingRequest,public $stateParams) {
    //setting the current value
    this.account = selectedCardAccount.account;
    //calling a serive again after five section to referesh the content
    $timeout(function(){
            //delete the current object
        delete this.account;
        //calling service to get result
                CardService.getAccountAndCardByShortName($stateParams.productShortName,$stateParams.id).then((succRess)=>{
            //setting the value
            //Error : cannot read property of account
            this.account = succRess.account;
        });
    }, 5000);
}

错误:无法读取帐户

属性

指令代码:

module ec.directives {
        export class easein{
            /**
             * A directive is not new:ed up so we don´t specify anything on this class
             * */
            constructor(){
                var directive: ng.IDirective = {};
                directive.link = (scope:IEaseInNumberScope, element, attrs, ctrl:controllers.EaseInNumberCtrl) => {
                    ctrl.animateRemainingValue(scope);
                };
                directive.restrict = "EA";
                directive.template = "{{current | number : 2}}";
                directive.controller = 'EaseInNumberCtrl';
                directive.scope = {
                    duration: "=?",
                    startValue: "=?",
                    endValue: "="
                };
                return directive;
            }
        }
}
HTML:

<div class="row">
    <div class="col-xs-6">
        <h2 class="heading-small-bold light mar-l-1"
            ng-bind="'used_amount' | i18n"></h2>
        <h1 class="heading-big-thin-medium mar-l-1">
            <easein end-value="vm.account.usedCredit"></easein>
        </h1>
    </div>
    <div class="col-xs-6 align-r">
        <h2 class="heading-small-bold light mar-r-1"
            ng-bind="'left_to_spend' | i18n"></h2>
        <h1 class="heading-big-thin-medium mar-r-1">
            <easein start-value="vm.account.creditLimit"
                    end-value="vm.account.openToBuy"></easein>
        </h1>
    </div>
    <div class="col-xs-12 mar-t-2">
        <progressbar class="progress-bar" value="vm.loadingValue"
                     max="vm.account.creditLimit"
                     type="warning"></progressbar>
        <div class="flexible-header">
            <h2 class="heading-small-bold light"
                ng-bind="'last_transactions' | i18n"></h2>
        </div>
    </div>
</div>

如果有人有任何建议,我如何在构造器中刷新5节后的值,请帮助。

根据错误消息,成功时帐户不可用。

您应该尝试查看success是否是一个有效的JSON对象,如果服务返回的数据与服务器一样,则需要使用JSON.parse将其反序列化为JSON对象。

另外,您可能需要考虑使用$timeout,以便该属性的侦听器能够感知值的变化。

我相信你的方法是错误的。

首先,你需要在Typescript中使用lambda(箭头函数),以便在$timeout回调中正确设置构造函数的this上下文。

第二,没有理由使用delete关键字。在保持初始对象引用不变的情况下,用新的结果设置this.account的值。

static $inject = ['$scope', 'selectedCardAccount', 'CardService', 'ecAnimationService', '$interval', '$modal','$rootScope','$timeout','PromiseTimeout','$q','$stateParams'];
constructor(public $scope,public selectedCardAccount, public CardService:services.CardService, public $interval:ng.IIntervalService, public $modal,public $rootScope:ng.IRootScopeService, public $timeout,public PromiseTimeout,public $q,public TrackPendingRequest,public $stateParams) {
    //setting the current value
    this.account = selectedCardAccount.account;
    //calling a serive again after five section to referesh the content
    $timeout(() => {
         CardService
             .getAccountAndCardByShortName($stateParams.productShortName,$stateParams.id)
             .then((succRess)=>{
                  angular.copy(succRess.account, this.account);
              });
    }, 5000);
}