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;
                })
            })
    }
}

Ответы (0 шт):