Angular PUT request в ходе программы перестает работать
Всем привет
Возник вопрос связанный с работой http.put() request в Angular. В ходе программы, я обновляю данные о матче между двумя командами, и сами команды. Если я это делаю неспешна, то все данные отправляются, в противном случае данные для обновления команд не отправляется на сервер.
setScore() - функция, которая выполняется для того, чтобы обновить данные о матче
updateTeams() - вызывается внутри setScore() для того, чтобы обновить данные о командах
я думаю, что проблема в этом блоке кода, где я обновляю две команды поочередно, и в связи с этим, данные не успевают обновится, когда я начинаю обновлять уже следующий матч.
Может, можно как - то исправить эту проблему при помощи Rxjs?
this.premierLeagueService
.editTeam(this.homeTeam)
.subscribe((data: Team) => {
this.teams = this.teams.map((team: Team) => {
if (team.id === this.homeTeam.id) {
team = Object.assign({}, team, this.homeTeam);
}
return team;
})
})
this.premierLeagueService
.editTeam(this.awayTeam)
.subscribe((data: Team) => {
this.teams = this.teams.map((team: Team) => {
if (team.id === this.awayTeam.id) {
team = Object.assign({}, team, this.awayTeam);
}
return team;
})
})
premier-league.service.ts
const TEAMS_API = '/api/teams';
editTeam(team: Team): Observable<Team> {
return this.http
.put(`${TEAMS_API}/${team.id}`, team)
.map((response: Response) => response.json())
.catch((error: any) => Observable.throw(error.json()));
}
match-item.component.ts
export class MatchItemComponent implements OnInit {
constructor(private premierLeagueService: PremierLeagueService) {}
ngOnInit() {
this.premierLeagueService
.getAllTeams()
.subscribe((data: Team[]) => {
this.teams = data;
this.homeTeam = this.teams.filter((team: Team) => team.id === this.match.homeTeamID)[0];
this.awayTeam = this.teams.filter((team: Team) => team.id === this.match.awayTeamID)[0];
});
}
@Input()
match: Match;
@Input()
matchday: Matchday;
@Input()
teamIndex: number;
@Input()
teamAmount: number;
@Output()
editedMatchday: EventEmitter<Matchday> = new EventEmitter<Matchday>();
teams: Team[];
homeTeam: Team;
awayTeam: Team;
settingScore: boolean = false;
submittedScore: Match = {...this.match};
setHomeScore(score: number) {
this.submittedScore.homeTeamScore = score;
}
setAwayScore(score: number) {
this.submittedScore.awayTeamScore = score;
}
setScore() {
if (this.submittedScore.homeTeamScore && this.submittedScore.awayTeamScore) {
this.match = { ...this.match, ...this.submittedScore };
this.updateTeams();
this.matchday.matches = this.matchday.matches.map((el: Match) => {
if (el.id === this.match.id) {
el = Object.assign({}, el, this.match);
}
return el;
})
this.editedMatchday.emit(this.matchday);
}
}
toggleSettingScore() {
this.settingScore = !this.settingScore;
}
updateTeams() {
this.homeTeam.gamesPlayed++;
this.awayTeam.gamesPlayed++;
// result
if (this.match.homeTeamScore > this.match.awayTeamScore) {
this.homeTeam.gamesWon++;
this.awayTeam.gamesLost++;
this.homeTeam.points += 3;
} else if (this.match.homeTeamScore === this.match.awayTeamScore) {
this.homeTeam.gamesDrawn++;
this.awayTeam.gamesDrawn++;
this.homeTeam.points++;
this.awayTeam.points++;
} else {
this.homeTeam.gamesLost++;
this.awayTeam.gamesWon++;
this.awayTeam.points += 3;
}
// goals
this.homeTeam.goalsScored += +this.match.homeTeamScore;
this.homeTeam.goalsConceded += +this.match.awayTeamScore;
this.awayTeam.goalsScored += +this.match.awayTeamScore;
this.awayTeam.goalsConceded += +this.match.homeTeamScore;
this.premierLeagueService
.editTeam(this.homeTeam)
.subscribe((data: Team) => {
this.teams = this.teams.map((team: Team) => {
if (team.id === this.homeTeam.id) {
team = Object.assign({}, team, this.homeTeam);
}
return team;
})
})
this.premierLeagueService
.editTeam(this.awayTeam)
.subscribe((data: Team) => {
this.teams = this.teams.map((team: Team) => {
if (team.id === this.awayTeam.id) {
team = Object.assign({}, team, this.awayTeam);
}
return team;
})
})
}
}