Angular 角度6发布后不更新视图

我只想提交一个输入，但angular不会更新html组件上的列表。我使用Web Api作为后端

服务：

getRanks(): Observable<Rank[]> {
   return this.http.get<Rank[]>(this.rankUrl);
}

Component.html：

<div class="col-md-6 text-center">
<input  [(ngModel)]="newRank.Name">
   <button (click)="saveRank(newRank)">Save</button>
</div>
<div *ngFor="let rank of ranks"> {{rank.Name}}

</div>

拯救
{{rank.Name}

我从原来的代码中剥离了尽可能多的代码，但它的行为仍然相同。我还评论了与post和get方法无关的所有内容

我检查了其他答案，并尝试使用zone和

changeDetection:ChangeDetectionStrategy.Default

如果我刷新页面，它就会显示出来，所以它在数据库中被提交了，但在提交之后就不会显示了

有什么想法吗？我还应该提供其他信息吗

---

谢谢

您需要刷新您的ranks对象。只需调用

this.getranks（）

或

你需要刷新你的等级对象。只需调用
this.getranks（）

或

您应该在subscribe success函数中调用getRanks（）函数，如下所示：

saveRank(rank: Rank) {
   this.rankService.addRank(rank)
    .subscribe(_ => this.getRanks());
}

您应该在subscribe success函数中调用getRanks（）函数，如下所示：

saveRank(rank: Rank) {
   this.rankService.addRank(rank)
    .subscribe(_ => this.getRanks());
}

如果您不想全部使用此.getRanks，请手动将该项添加到数组“rank”中

saveRank（秩：秩）{
this.rankService.addRank（rank）
.subscribe（=>this.ranks.push（rank））；//如果不想全部使用此.getRanks，请手动将该项添加到数组“rank”

saveRank（秩：秩）{
this.rankService.addRank（rank）
.subscribe（=>this.ranks.push（rank））；//差不多，但问题是我必须提交两次才能更新列表，这会在数据库中创建重复的条目。很抱歉，我错过了subscribe指令。我编辑了我的文章。差不多，但问题是我必须提交两次才能更新列表，这会在数据库中创建重复的条目。很抱歉，我错过了subscribe指令。我编辑了我的帖子。我非常确定订阅中存在问题，但我以前从未需要指定任何其他get方法。不应该单独执行此操作吗？不。有关角度变化检测的详细信息，请参阅下面的链接。我非常确定订阅中存在问题，但我以前从未需要指定任何其他方法er get方法。不应该单独执行此操作吗？不。有关角度变化检测的更多信息，请参阅下面的链接。
this.rankService.addRank(rank).subscribe( _=> ranks.push(rank));

saveRank(rank: Rank) {
   this.rankService.addRank(rank)
    .subscribe(_ => this.getRanks());
}

saveRank(rank: Rank) {
   this.rankService.addRank(rank)
    .subscribe(_ => this.ranks.push(rank)); //<--push the array
}