comeback4you comeback4you - 2 months ago 15
Javascript Question

Angular 2 function inside callback value not updating view

I have created function and inside function i'm calling one callback function after callback response I have update string variable but this string variable not updating my view.

import { Component } from 'angular2/core';

@Component({
selector : "myview"
templateUrl : 'app/view/myview.component.html'
})


export class ViewComponent {

getAddress : string;
public totlaBalance : string;

getBalance():void{
var self = this;
getBalanceData(this.getAddress,function(error,res){
console.log(res);
self.totlaBalance = res;


});
}
}


In html file

<h1>Balance = {{totlaBalance}} </h1>


package.js

"dependencies": {
"angular2": "2.0.0-beta.15",
"systemjs": "0.19.26",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.10",
"bootstrap": "^3.3.6"
},


In console value showing but in view value not updating.

I'm using 3rd party callback function its not allowing arrow function.

Answer

You just need to use ArrowFunction (()=>) and ChangeDetectionRef as shown below,

import {Injectable, ChangeDetectorRef } from 'angular2/core';  //<<<===here

export class ViewComponent {
    getAddress : string;
    public totlaBalance : string;

     constructor(private ref: ChangeDetectorRef){}             //<<<===here

     getBalance():void{
             var self = this;
             getBalanceData(this.getAddress,(error,res)=>{    //<<<===here
                 console.log(res);
                 self.totlaBalance = res;
                 self.ref.detectChanges();                    //<<<===here
             });
     }
}