Angular 6在POST后不更新視圖

Question

我只想提交一個輸入，但是angular不會更新html組件上的列表。 我正在使用Web Api作為后端。

服務：

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

Component.ts：

ngOnInit() {
   this.getRanks();
}

newRank: any = {};

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

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

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>

我從原始代碼中剝離了盡可能多的代碼，但其行為仍然相同。 我還評論了與post和get方法無關的所有內容。

我檢查了其他答案，並嘗試使用zone和changeDetection: ChangeDetectionStrategy.Default

如果刷新頁面，則會顯示該頁面，因此該頁面已在數據庫中提交，但提交后未顯示。

有任何想法嗎？ 我應該提供其他信息嗎？

謝謝

Answer 1

您應該像這樣在subscribe success函數中調用getRanks（）函數：

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

Answer 2

您需要刷新等級對象。 只需調用this.getranks();

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

要么

this.rankService.addRank(rank).subscribe( _=> ranks.push(rank));

Answer 3

如果您不想要所有this.getRanks，請將該項目手動添加到數組“ rank”

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

或更改您的API，以便API調用saveRank，返回所有排名