如何在构造函数打字稿中 5 秒后更新范围值

Question

我面临一个问题，我必须在 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 部分之后的值，请帮助。

Answer 1

根据错误消息，帐户在 succRess 上不可用。

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

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

Answer 2

我认为您的方法存在错误。

首先您需要在 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);
}