Angular 7 HttpClient POST - Плохой запрос - PullRequest
Новая
       19

Angular 7 HttpClient POST - Плохой запрос

0 голосов
/ 10 февраля 2019

Снова взяв учебник по сайту Angular, я создал в winamp базу данных с таблицей, включающей поле {"id": id, "name": name}, и я делаю 2 запроса к этой таблице с помощью Symfony4: 1)Просьба перечислить героев.2) Запрос на создание героя.

Выполнен из Angular 7, запрос 1) работает отлично (route / listerHeroes).

Выполнен из Angular 7, запрос 2) не работает, онвозвращает ошибку 405 (route / ajouterHero).Несмотря на то, что этот запрос был запущен почтальоном, он работает.

Я не могу найти никакой документации, чтобы объяснить мне эту ошибку, на которую я наткнулся в течение нескольких дней.Трек пожалуйста ниже копия обоих классов: heroes.service.ts и component3.component.ts 

    // heroes.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

import { HttpErrorHandler, HandleError } from './http-error-handler.service';
import { Hero } from '../assets/Structure';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json'
  })
};

@Injectable({ providedIn: 'root' })
export class HeroesService {
  heroesUrl = 'http://heroes/';
  private handleError: HandleError;

  constructor(private http: HttpClient, httpErrorHandler: HttpErrorHandler) {
    this.handleError = httpErrorHandler.createHandleError('HeroesService');
  }

  getHeroes$(): Observable<Hero[]> {
    return this.http.get<Hero[]>(`${this.heroesUrl}listerHeroes`, httpOptions);
  }

  addHero(hero: Hero): Observable<Hero> {
    return this.http
      .post<Hero>(`${this.heroesUrl}ajouterHero`, hero, httpOptions)
      .pipe(catchError(this.handleError('addHero', hero)));
  }
}

    // component3.component.ts
import { Component, OnInit } from '@angular/core';
import { HeroesService } from '../heroes.service';
import { Hero } from '../../assets/Structure';

@Component({
  selector: 'app-component3',
  templateUrl: './component3.component.html',
  styleUrls: ['./component3.component.css']
})
export class Component3Component implements OnInit {
  heroes: Hero[];
  editHero: Hero;

  constructor(private heroesService: HeroesService) {}

  ngOnInit() {
    this.heroesService.getHeroes$().subscribe(res => (this.heroes = res));
  }

  addHero(name: string): void {
    name = name.trim();
    console.log('FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF C3A name =', name);
    if (!name) {
      return;
    }
    const newHero: Hero = { 'id': 0, 'name': name } as Hero;
    this.heroesService.addHero(newHero).subscribe(hero => {
      console.log('GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG C3B hero= ', hero);
      this.heroes.push(hero);
    });
  }
}

1 Ответ

0 голосов
/ 11 февраля 2019

Я нашел решение: блокировка была указана в бэкэнде (Symfony4), который отклонил опции предварительного запроса.Необходимо было установить и настроить пакет nelmio (https://github.com/nelmio/NelmioApiDocBundle), который обеспечивает бесперебойную работу запроса.

...