[英]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;
}
}
尽管在方法 this.setMessageToDisplay() 中更改了值,但使用 {{message}} 显示了此变量的初始化值。 我在 html <div class="text">{{setMessageToDisplay()}}</div>
中做了类似的事情,但方法执行了几次,我只想显示消息变量的最后一个值。 是否可以在 html 中设置 {{message}} 并刷新视图?
您可以使用 ChangeDetecorRef 模块手动调用更改检测:
import {ChangeDetectorRef} from @angular/core
constructor(private ref:ChangeDetectorRef){}
ngOnInit() {
this.setMessageToDisplay();
this.ref.detectChanges();
}
试试这个改变:
<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; } }
记住public
您的消息
您可以使用:
this.ref.detectChanges();
要么:
get message() { return this.setMessageToDisplay(); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.