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方法无关的所有内容。

我检查了其他答案，并尝试使用区域和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，请将该项目手动添加到数组“等级”

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

或更改您的API，这样，API调用saveRank，返回所有排名

Angular 6在POST后不更新视图

3 个答案: