时间戳

首页 > 解决方案 > Angular 6在POST后不更新视图

angular - Angular 6在POST后不更新视图

问题描述

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

服务：

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

组件.ts：

ngOnInit() {
   this.getRanks();
}

newRank: any = {};

saveRank(rank: Rank) {
   this.rankService.addRank(rank).subscribe();
}

getRanks(): void {
   this.rankService.getRanks()
      .subscribe(
         ranks => {
           this.ranks = ranks;
   });
}

组件.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>

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

我检查了其他答案并尝试使用区域和changeDetection: ChangeDetectionStrategy.Default

如果我刷新页面然后它会显示出来，所以它在数据库中提交但提交后没有显示。

有任何想法吗？我应该提供任何其他信息吗？

谢谢

标签： angularangular6

解决方案

您应该像这样在订阅成功函数中调用 getRanks() 函数：

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

推荐阅读