Angular 6在POST后不更新视图

Question

I just want to submit one input but angular doesn't update the list on the html component. I am using Web Api for backend.

Service:

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>

I stripped the code as much as I could from the original one but it still behaves the same. I also commented everything that is not related to post and get methods.

I checked other answers and tried to use zone and changeDetection: ChangeDetectionStrategy.Default

If I refresh the page then it shows up, so its submitted in the database but it doesn't show up after submission.

Any ideas? Any other info I should provide?

Thank you

Answer 1

You should call the getRanks() function in the subscribe success function like this:

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

Answer 2

you need to refresh your ranks object. simply you can call this.getranks();

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

or

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

Answer 3

if you don't want to all this.getRanks, add manually the item to the array "rank"

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

or change your API so, the API call to saveRank, return all the ranks