如何在构造函数typescript中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

我相信你的方法有错误。

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

Answer 2

按照该错误信息，帐户不可用于succRess。

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

另外，您可能需要考虑使用$ timeout，因此值的更改会被该属性的侦听器感知。