Угловой метод PATCH не допускается

Question

Использование новейшей версии Angular

Angular CLI: 6.0.0
Node: 8.11.1
OS: win32 x64
Angular: 6.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Я изучаю угловой и изучаю различные http запросы, такие как GET, POST, PUT и теперь PATCH.

но у меня проблема, когда я использую метод PATCH, я просто копирую метод PUT и просто меняю PUT на PATCH, потому что я думал, что они просто имеют одинаковые параметры и функция. но я сталкиваюсь с ошибкой:

service.ts

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

patchHero(hero: Hero): Observable<any> {
    return this.http.patch(heroesUrl, hero, httpOptions)
      .pipe(
        tap(_ => this.log(`patched hero id=${hero.id}`)),
        catchError(this.handleError<any>('patchHero'))
    );
}

component.ts

update(id: number, name: string): void {
    this.heroService.patchHero({id, name } as Hero)
        .subscribe(() => { 
        console.log("Success update") // This log is printing even if the Method not allow is appeared.
    });
}

Я просто работаю и занимаюсь изучением углов данного урока с этого сайта.

Answer 1

Это похоже на проблему с отправкой пустых Заголовков .

Можете ли вы попробовать добавить заголовок к вашим опциям:

let _headers = new HttpHeaders();
_headers = headers.append('Content-Type', 'application/json');
const httpOptions = {
    headers: _headers
};

Answer 2

Даниэль Б правильно понял. Ниже приведено несколько подробностей.

Метод исправления не планируется поддерживать angular-in-memory-web-api для этой проблемы GitHub здесь

Для справки я добавил метод исправления в свой файл in-memory-data.service.ts с чем-то вроде этого.

export class InMemoryDataService implements InMemoryDbService {
    patch(requestInfo: RequestInfo): Observable<Response> {
        const body = createBody(requestInfo);
        const responseOptions: ResponseOptions = {
            headers: requestInfo.headers,
            url: requestInfo.url,
            body,
            status: STATUS.OK,
            statusText: getStatusText(STATUS.OK),
        }
        return requestInfo.utils.createResponse$(() => responseOptions);
    }
}

Answer 3

Ответ в этом случае связан не с самим Angular, а с использованием пакета angular-in-memory-web-api, который используется для подачи ложных данных в приложение. В нем просто не реализован метод PATCH, и поэтому его нельзя использовать.

Однако вы можете самостоятельно реализовать метод, как описано в документации к пакету .

В InMemoryDataService классе in-memory-data.service.ts вы можете определить patch(request: RequestInfo): Observable<Response> метод для обработки вашего запроса.

Простая проверка со следующим кодом должна распечатать консольное сообщение!

patch(request: RequestInfo): Observable<Response> {
  console.log('This is inside your custom patch method!');
  return null;
}

Это, очевидно, не полная реализация метода PATCH, но поскольку вопрос на самом деле не об этом, я предлагаю вам посмотреть на различия между PUT и PATCH и посмотреть, сможете ли вы придумай это сам! (Подсказка, используйте PUT, но не забудьте также включить данные, которые вы не исправляете!)

Вот пример с перехватчиком PATCH!