Cześć,
obecnie walczę z małym projekcikiem, który ma za zadanie realizować miedzy innymi funkcje CRUD. Użyłem in-memory-db do przechowywania danych, routing działa ok, w momencie kiedy przechodzę do podstrony klubu, chciałbym mieć możliwość jego usunięcia lub edytowania(w bieżącej sesji).. Usuwanie działa ok, niestety męczę się edytowaniem, więc prosiłbym o pomoc. Tak wyglądają moje serwisy i metody:
service:
export class ClubService{
private clubUrl = 'api/clubs';
constructor(private http: HttpClient) {}
getClubs(): Observable<IClub[]> {
return this.http.get<IClub[]>(this.clubUrl)
.pipe(
tap(data => console.log(JSON.stringify(data))),
catchError(this.handleError)
);
}
getClub(id: number): Observable<IClub> {
if (id === 0){
return of(this.initializeClub());
}
const url = `${this.clubUrl}/${id}`;
return this.http.get<IClub>(url)
.pipe(
tap(data => console.log('getClub: ' + JSON.stringify(data))),
catchError(this.handleError)
);
}
createClub(club: IClub): Observable<IClub> {
const headers = new HttpHeaders({'Content-Type': 'application/json'});
club.id = 0;
return this.http.post<IClub>(this.clubUrl, club, {headers})
.pipe(
tap(data => console.log('createClub: ' + JSON.stringify(data))),
catchError(this.handleError)
);
}
deleteClub(id: number): Observable<{}> {
const headers = new HttpHeaders({ 'Content-Type': 'application/json'});
const url = `${this.clubUrl}/${id}`;
return this.http.delete<IClub>(url, {headers})
.pipe(
tap(data => console.log('deleteClub:' + id)),
catchError(this.handleError)
);
}
updateClub(club: IClub): Observable<IClub> {
const headers = new HttpHeaders({'Content=Type': 'application/json'});
const url = `${this.clubUrl}/${club.id}`;
return this.http.put<IClub>(url, club, {headers})
.pipe(
tap(() => console.log('updateClub: ' + club.id + club.clubName)),
map(() => club),
catchError(this.handleError)
);
}
private handleError(err: HttpErrorResponse): Observable<never> {
let errorMessage = '';
if (err.error instanceof ErrorEvent) {
errorMessage = `An error occurred: ${err.error.message}`;
} else {
errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
}
console.error(errorMessage);
return throwError(errorMessage);
}
private initializeClub(): IClub {
return {
id: 0,
clubName: "",
clubLogoURL: ""
};
}
}
klasa:
export class ClubEditComponent {
tabTitle: string = "Club Edit:";
errorMessage: string ='';
club!: IClub ;
constructor(private route: ActivatedRoute,
private router: Router,
private clubService: ClubService) {}
ngOnInit(): void {
const param = Number(this.route.snapshot.paramMap.get('id'));
if (param) {
const id =+param;
this.getClub(id);
}
}
getClub(id: number): void {
this.clubService.getClub(id).subscribe({
next: club => {
this.club = club;
},
error: err => this.errorMessage = err
});
}
updateClub(): void {
this.clubService.updateClub(this.club)
.subscribe({
next: () => this.router.navigate(['/clubs']),
error: err => this.errorMessage = err
});
}
deleteClub(): void {
this.clubService.deleteClub(this.club?.id)
.subscribe({
next: () => this.router.navigate(['/clubs']),
error: err => this.errorMessage = err
});
}