angular数据刷新页面没有同步刷新解决

angular数据刷新了但是视图没刷新

现象： 页面渲染完成，在该页面不同组件间相互路由，观察到数据可以动态从后台获取，但是页面却没有渲染
如下：

目的是点击左边文章分类下的栏目，然后在右边的空白处进行展示，但是点击后观察到右边有数据打印出来，页面却没被渲染

解决方案：
数据获取后添加如下代码：

this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();

...
constructor(private  changeDetectorRef:ChangeDetectorRef) {

...

this.blogArtSer.getBlogArticleByType(this.param).then((data: ResponseBody) => {
        if (data.status === 'successful') {
          this.blogArticleList = data.object;
       
          this.test = this.blogArticleList[0].id

          // console.dir(this.blogArticleList)
          //组件局部刷新，数据刷新但是视图没刷新解决代码
          this.changeDetectorRef.markForCheck();
          this.changeDetectorRef.detectChanges();
}
...

添加后：