Угловая функция 2 внутри значения обратного вызова, не обновляющего вид

Question

Я создал функцию и внутри функции Я вызываю одну функцию обратного вызова после ответа обратного вызова У меня есть строковая переменная обновления, но эта строковая переменная не обновляет мое представление.

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; 


      }); 
     } 
} 

В HTML файле

<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" 
    }, 

В стоимости консоли показывает, но в значении просмотра не обновляется.
Я использую стороннюю функцию обратного вызова, которая не позволяет использовать функцию стрелки.

Answer 1

Вам просто нужно использовать ArrowFunction (() =>) и ChangeDetectionRef, как показано ниже,

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 
      }); 
    } 
} 

Answer 2

Логик обратного вызова должен быть запущен в пределах угловой зоны.

import { Component, NgZone } from '@angular/core'; 

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

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

    constructor(private ngZone: NgZone) {} 

    getBalance(): void { 
    getBalanceData(this.getAddress, (error, result) => this.ngZone.run(() => { 
     console.log(result); 
     this.totalBalance = result; 
    })); 
    } 
}