angular save() method not working hero tutorial - django

Question

Following the Angular (using 7.3.4) Hero Tutorial. Using angular with a django backend. I cannot seem to get a hero name to update:
I have a hero-detail.component.ts that has a save() method which should update the hero via the HeroService.updateHero() method. When i click the save button nothing happens at all...
I am suspicious that the heroService.updateHero method is pointing to the wrong url, but I am not sure where to point it or what to pass it to. Also using Pycharm and put in return this.http.put(this.heroesUrl, hero, httpOptions is red as an unresolved function, but i think this is just a Typescript Pycharm setting that should not matter.
Any pointers appreciated.
hero-detail.component.ts
import { Component, OnInit, Input } from '#angular/core';
import { Hero } from '../hero'
import { ActivatedRoute } from '#angular/router';
import { Location } from '#angular/common';
import { HeroService } from '../hero.service';
#Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.scss']
})
export class HeroDetailComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private heroService: HeroService,
private location: Location
) {}
#Input() hero: Hero;
ngOnInit(): void {
this.getHero();
}
getHero(): void {
const number = +this.route.snapshot.paramMap.get('number');
this.heroService.getHero(number)
.subscribe(hero => this.hero = hero);
}
save(): void {
this.heroService.updateHero(this.hero)
.subscribe(() => this.goBack());
}
goBack(): void {
this.location.back();
}
hero.service.ts
import { Injectable } from '#angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable, of } from 'rxjs'
import { HttpClient, HttpHeaders } from '#angular/common/http'
import { catchError, map, tap } from 'rxjs/operators';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
#Injectable({
providedIn: 'root'
})
export class HeroService {
private heroesUrl = 'http://127.0.0.1:8000/heroes/'; // URL to web api
constructor(
private http : HttpClient
) { }
getHeroes (): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
}
getHero(id:number): Observable<Hero>{
return this.http.get<Hero>(`${this.heroesUrl}${id}`);
}
updateHero (hero: Hero): Observable<any> {
return this.http.put(this.heroesUrl, hero, httpOptions)
}
}
}
heroes/views.py
from django.shortcuts import render
from rest_framework.response import Response
from .models import Hero
from rest_framework import generics
from .serializers import HeroSerializer
# Create your views here.
class HeroList(generics.ListAPIView):
queryset = Hero.objects.all()
serializer_class = HeroSerializer
class Meta:
model = Hero
fields = ('number', 'name','id')
class HeroDetail(generics.GenericAPIView):
serializer_class = HeroSerializer
def get(self, request, id):
hero_detail = Hero.objects.get(id=id)
serializer = HeroSerializer(hero_detail)
return Response(serializer.data)
def put(self, request, id):
hero_detail = Hero.objects.get(id=id)
# hero_detail.name = request.data.get("name")
hero_detail.save()
serializer = HeroSerializer(hero_detail)
return Response(serializer.data)
class Meta:
model = Hero
fields = ('number', 'name','id')
hero-detail.component.html
<div *ngIf="hero">
<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name">
</label>
</div>
</div>
<button (click)="goBack()">go back</button>
<button (click)="save()">save</button>

Answer 1

You should send the put request to '/heroes/hero_id/' for updates. With the restful APIs, in general, you should send
POST request to /heroes/ -> Create hero
GET request to /heroes/ -> List heroes
GET request to /heroes/id/ -> Retrieve single hero
PUT request to /heroes/id/ -> Update hero
DELETE request to /heroes/id/ -> Delete hero
So in your example, you should modify your updateHero method like this:
updateHero (hero: Hero): Observable<any> {
return this.http.put(`${this.heroesUrl}${hero.id}/` hero, httpOptions)
}