[英]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 在html文件中
<h1>Balance = {{totlaBalance}} </h1>
package.js 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. 我正在使用第三方回调函数,它不允许使用箭头功能。
You just need to use ArrowFunction (()=>) and ChangeDetectionRef as shown below, 你只需要使用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
});
}
}
The callback logic should be run within Angular Zone. 回调逻辑应该在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;
}));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.