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

本案例中的答案与Angular本身无关，而是使用用于向应用程序提供模拟数据的angular-in-memory-web-api包。它实际上没有实现PATCH方法，因此不允许使用。

然而，您可以自行实施该方法，如enter link description here所述。

在InMemoryDataService的{{1}}课程中，您可以定义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和{{1}之间的差异并看看你是否可以自己想出来！ （提示，请使用PUT，但请记住包含您未修补的数据！）

in the documentation of the package

Answer 2

发送空标题似乎是一个问题。

您可以尝试将标题添加到选项中：

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

Answer 3

丹尼尔B说对了。下面是填写一些详细信息。

根据此GitHub问题here，angular-in-memory-web-api不计划支持补丁方法

作为参考，我在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);
    }
}

不允许使用角度PATCH方法

3 个答案: