После Angular (с использованием 7.3.4) Герой Учебник.Использование угловых с бэкэндом Django.Я не могу получить имя героя для обновления:
У меня есть hero-detail.component.ts , который имеет метод save(), который должен обновить hero через HeroService.updateHero() метод.Когда я нажимаю кнопку сохранения, ничего не происходит вообще ...
Я подозреваю, что метод heroService.updateHero указывает на неправильный URL, но я не уверен, куда его направить или на что передать.,Также использование Pycharm и put в return this.http.put(this.heroesUrl, hero, httpOptions является красным как неразрешенная функция, но я думаю, что это просто настройка Typescript Pycharm, которая не должна иметь значения.
Любые указатели приветствуются.
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>