[英]Angular update view after change data
<div class="text">{{message}}</div>
private message = 'Some message';
ngOnInit() {
this.setMessageToDisplay();
}
setMessageToDisplay() {
if (this.packageService.isDocPackageEmpty) {
if(this.router.url === '/documents/todo') {
this.message = 'M1';
}
else if (this.router.url === '/documents/done') {
this.message = 'M2';
}
else if (this.imageService.isVisiblePatientDocList()) {
let pacientId = this.router.url.split("/")[2];
this.message = "M3";
}
} else {
this.message = 'Def Message';
}
return this.message;
}
}
Using {{message}} displayed intialize value of this variable despite value changed in method this.setMessageToDisplay().尽管在方法 this.setMessageToDisplay() 中更改了值,但使用 {{message}} 显示了此变量的初始化值。 I do something like this in html
<div class="text">{{setMessageToDisplay()}}</div>
but method is executed few time and I want display only last value of message variable.我在 html
<div class="text">{{setMessageToDisplay()}}</div>
中做了类似的事情,但方法执行了几次,我只想显示消息变量的最后一个值。 Is possible set {{message}} in html and refresh view?是否可以在 html 中设置 {{message}} 并刷新视图?
You can invoke change detection manually with ChangeDetecorRef module:您可以使用 ChangeDetecorRef 模块手动调用更改检测:
import {ChangeDetectorRef} from @angular/core
constructor(private ref:ChangeDetectorRef){}
ngOnInit() {
this.setMessageToDisplay();
this.ref.detectChanges();
}
just try this change:试试这个改变:
<div class="text">{{message}}</div> public message = 'Some message'; ngOnInit() { this.message = this.setMessageToDisplay(); } setMessageToDisplay() { let message: string; if (this.packageService.isDocPackageEmpty) { if(this.router.url === '/documents/todo') { message = 'M1'; } else if (this.router.url === '/documents/done') { message = 'M2'; } else if (this.imageService.isVisiblePatientDocList()) { let pacientId = this.router.url.split("/")[2]; message = "M3"; } } else { message = 'Def Message'; } return message; } }
REMEMBER to set public
your message记住
public
您的消息
you can use:您可以使用:
this.ref.detectChanges();
or:要么:
get message() { return this.setMessageToDisplay(); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.