typescript - 不允许使用 Angular 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和现在的.POSTPUTPATCH

但是当我使用该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.
    });
}

我只是在工作和练习它网站上给定教程的角度。

score 2 · Accepted Answer

在这种情况下，答案与 Angular 本身无关，而与angular-in-memory-web-api用于向应用程序提供模拟数据的包的使用有关。它根本没有PATCH实现方法，因此不允许使用。

但是，您可以做的是自己实现该方法，如package 文档中所述。

在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方法的完整实现，但由于问题不是真的，我建议您查找 aPUT和 a之间的差异PATCH，看看您是否可以自己想出它！（提示，使用PUT但请记住包含您没有修补的数据！）

PATCH这是拦截器的示例！

score 0 · Accepted Answer

丹尼尔 B 说得对。下面是填写一些细节。

此处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);
    }
}

score 0 · Accepted Answer

发送空Headers看起来像一个问题。

您可以尝试将标头附加到您的选项：

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

typescript - 不允许使用 Angular PATCH 方法

3 回答 3

Related

Reference