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（（）=＆gt;）和 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

回调逻辑应该在Angular Zone中运行。

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

回调值内的Angular 2函数不更新视图

2 个答案: