在Angular 4中添加数据后更新视图

在添加新项目后，我的观点有问题。我需要重新加载网页后，我看到了新的项目。我希望在添加一个新项目后，视图也在更新，如何让它检测到更改。下面是我的代码

ts

导出类ProjectsListComponent实现OnInit{
closeResult：字符串；
项目：任何；
认购：认购；
构造函数（私有modalService:NgbModal，私有projects服务：projects服务）{}
恩戈尼尼特（）{
this.subscription=this.projectsService.getAll（）
.订阅(
（数据：任何）=>{
this.projects=data.projects；
控制台日志（数据）；
},
错误=>{
警报（“错误”）；
});
}
onCreateProject（格式：NgForm）{
const name=form.value.name；
常量描述=form.value.description；
this.projectsService.addProject（名称、描述）
.订阅(
数据=>{
警报（“成功添加”）；
控制台日志（数据）；
},
错误=>{
警告（“添加错误”）；
console.log（错误）；
});
}
}

服务

@Injectable（）
导出类项目服务{
url=App.url+'/projects'；
项目：任何；
构造函数（私有httpClient:httpClient）{}
getAll（）{
如果（！this.projects）{
this.projects=this.httpClient.get（this.url）
.map（（响应=>响应））
.publishReplay（1）
.refCount（）；
}
归还此项目；
}
addProject（名称：string，说明：string）{
返回此.httpClient
.邮政(
这个.url，
stringify（{name，description}）
)
.map（（响应：任意）=>{
返回响应；
});
}

更改

ts

代码如下：成功更新后需要重新获取列表

  export class ProjectsListComponent implements OnInit {
    closeResult: string;
      projects: any;
      subscription: Subscription;

    constructor(private modalService: NgbModal, private projectsService: ProjectsService) { }

    ngOnInit() {
        this.getAllProjects();
    }

    onCreateProject(form: NgForm){
      const name = form.value.name;
      const description = form.value.description;
      this.projectsService.addProject(name, description)
        .subscribe(
            data => {
              alert("Success Adding");
              console.log(data);
              getAllProjects(); // <== Fetching list again after project add
            },
            error => {
              alert("Error Adding");
              console.log(error);
            });
    }

    getAllProjects(){
      this.subscription = this.projectsService.getAll()
          .subscribe(
            (data:any) => {
              this.projects = data.projects;
              console.log(data);
            },
            error => {
             alert("Error");
            });
    }
  }

导出类ProjectsListComponent实现OnInit{
closeResult：字符串；
项目：任何；
认购：认购；
构造函数（私有modalService:NgbModal，私有projects服务：projects服务）{}
恩戈尼尼特（）{
这是.getAllProjects（）；
}
onCreateProject（格式：NgForm）{
const name=form.value.name；
常量描述=form.value.description；
this.projectsService.addProject（名称、描述）
.订阅(
数据=>{
警报（“成功添加”）；
控制台日志（数据）；
getAllProjects（）；//{
警告（“添加错误”）；
console.log（错误）；
});
}
getAllProjects（）{
this.subscription=this.projectsService.getAll（）
.订阅(
（数据：任何）=>{
this.projects=data.projects；
控制台日志（数据）；
},
错误=>{
警报（“错误”）；
});
}
}

@Sangwun Gawande我放置了这个.getAllProjects（），因为它得到了一个错误。它仍然没有更新视图。我仍然需要重新加载它来获得新的数据this.projects=[]；this.projects=data.projects；console.log（data）；在getAllProjects（）中尝试这个方法成功，让我知道结果返回一个objectYes数组。它可以工作，但您需要在看到新数据之前重新加载页面。我希望它不再重新加载页面。单击“添加”后，您可以立即看到新数据。添加项目后，新项目是否会在控制台列表中打印？