我正在使用我的英超联赛应用程序，您可以在其中创建球队，为结束的比赛添加得分，并在表格中查看更新的球队数据，其中球队根据Premier League rules进行相应排序。
问题：
我在每次比赛后都需要更新球队。当我单击以更新某些比赛时，将更新比赛数据，然后是主队和客队数据。但是，当我开始非常快地更新比赛（在网站上设置得分）时，必须更新我的球队的http put请求停止工作。但是，如果我慢慢更新每个匹配项，一切都会正常进行。
所以我的问题是，当我快速更新匹配项时，为什么必须更新我的团队的HTTP PUT请求不起作用？
我正在使用Local JSON Server存储我的数据。Link to the project
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;
})
})
}
}
league-matches.component.ts
import { Component, OnInit } from '@angular/core';
import { PremierLeagueService } from '../../premier-league.service';
import { Matchday } from '../../models/matchday.interface';
import { Match } from '../../models/match.interface';
import { Team } from '../../models/team.interface';
@Component({
selector: 'league-matches',
styleUrls: ['league-matches.component.scss'],
template: `
<div
class="matchday"
*ngFor="let matchday of matches; let i = index">
<h2>Matchday {{ i + 1 }}</h2>
<match-item
*ngFor="let match of matchday.matches; let i = index; let c = count"
[match]="match"
[matchday]="matchday"
[teamIndex]="i"
[teamAmount]="c"
(editedMatchday)="editMatchday($event)">
</match-item>
</div>
`
})
export class LeagueMatchesComponent implements OnInit{
constructor(private premierLeagueService: PremierLeagueService) {}
matches: Matchday[];
currentMatchday: Matchday;
ngOnInit() {
this.premierLeagueService
.getAllMatchdays()
.subscribe((data: Matchday[]) => this.matches = data);
}
editMatchday(matchday: Matchday) {
this.premierLeagueService
.editMatchday(matchday)
.subscribe((data: Matchday) => {
this.matches = this.matches.map((el: Matchday) => {
if (el.id === matchday.id) {
el = Object.assign({}, el, matchday);
}
return el;
})
})
}
}
premier-league.service.ts
getAllTeams(): Observable<Team[]> {
return this.http
.get(TEAMS_API)
.map((response: Response) => response.json())
.catch((error: any) => Observable.throw(error.json()));
}
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()));
}
getAllMatchdays(): Observable<Matchday[]> {
return this.http
.get(MATCHES_API)
.map((response: Response) => response.json())
.catch((error: any) => Observable.throw(error.json()));
}
editMatchday(matchday: Matchday): Observable<Matchday> {
return this.http
.put(`${MATCHES_API}/${matchday.id}`, matchday)
.map((response: Response) => response.json())
.catch((error: any) => Observable.throw(error.json()));
}
接口
export interface Team {
name: string,
club: Club,
gamesPlayed: number,
gamesWon: number,
gamesDrawn: number,
gamesLost: number,
goalsScored: number,
goalsConceded: number,
points: number,
id: number
}
export interface Match {
homeTeamID: number,
awayTeamID: number,
venue: string,
city: string,
homeTeamScore?: number,
awayTeamScore?: number,
id: number
}
export interface Matchday {
id: number,
matches: Match[]
}
export interface Club {
clubName: string,
logoURL: string,
venue: string,
city: string
}
当您使用HTTP PUT请求时，最终将提供整个对象作为请求的主体，最终将用新对象完全替换现有资源。尝试使用HTTP PATCH请求，该请求将仅更新所需的字段，而不更新整个对象。