直到在页面上执行操作时，范围才适用

Question

在Metronic管理模板中使用Angular 7：

我向我的api请求并获取一些json值，并将其放在html标记中。但是，直到对页面数据执行某些操作为止，该数据才会出现。例如，我确实将鼠标悬停在左侧菜单上的某些项目上。或单击页面上的某些位置，数据将显示suddleny。

组件I将值设置为变量。

export class CvDetailComponent implements OnInit {

candidate: any = {}; 
constructor(
private route: ActivatedRoute,
private candidatesService: CandidatesService) { }

ngOnInit() {
var vm = this;
const user_id = this.route.snapshot.paramMap.get('user_id');
this.candidatesService.candidatesDetail(user_id)
.subscribe(
(response) => {
vm.candidate = response;
}
);
}

} 

将值设置为html

<div href="#">
<img [src]="candidateData?.photo?.smallPhoto" width="80" />
<h1>{{ candidate.name }} {{ candidate.surname }}</h1>
<h5>{{ candidate?.currentPositionName }}</h5>
</div> 

当我将值设置为变量时显示的第一张图片。什么都没发生。

第二张图片显示了鼠标悬停后何时出现数据。

---

嗨，

我在这篇文章中找到了答案。

How to force child component to reload its data and its view when parent data changes Angular 4

在努尔的回答下，我尝试过：

从'@ angular / core'导入{ChangeDetectionRef};

this.cd.detectChanges（）;

有效。

但是问题是我是否在每个组件中都调用了此方法？

更好的主意？