Question

我正在研究/扩展TOH。我有一个add方法，希望将新的Hero推送到数组上，然后将用户返回到列表。

对addHero的调用结果以双引号的形式作为JSON英雄返回，即字符串。

我读了很多似乎指向

的文章

angular.toJson
or 
.map(response=> response.JSON())

这些无效。

这是我的heros.component.ts的摘录

  add(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.addHero({ name } as Hero)
      .subscribe(hero =>
      {
        this.heroes.push(hero);
        this.location.go('/Heroes');
      }
      );
  }

和hero.service.ts 显然，这将返回一个Hero对象...

  addHero (hero: Hero): Observable<Hero> {
    return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
      tap((hero: Hero) => console.log(`added hero w/ id=${hero.id}`)),
      catchError(this.handleError<Hero>('addHero'))
    );
  }

返回时，结果成功推入数组，但用引号引起来。

UI证明这是列表的底部，因为该最终数组元素上没有.Name属性。

如果我刷新页面，每个人都将被加载为json。

简单的问题，但我似乎找不到答案。经历过许多涉及ng2，php等的S / O问题，但似乎都没有解决ng6的问题，也没有提供我可以拿走的线索。如果他们这样做，我想念它。

Answer 1

如果您想将json解析为javascript对象，则可以使用JSON.parse(response.JSON())

我正在猜测response.JSON（）将响应作为json返回，然后需要对其进行解析

编辑：您可能只需要删除map => response.JSON()即可。由于有角度的httpClient已经对其进行解析

Answer 2

问题是服务中例程的返回类型。

@youris问题使我对服务更加认真。

问题在于默认响应未正确编码为utf8和'text / html'

这是更正的代码。

Public Function add(mh As mHero) As CustomJsonStringResult

   Dim h As New TOHbos.Hero()
    h.name.Value = mh.name
    h.Save()
    Return JsonStringResultExtension.JSONString(Me, h.JSON, HttpStatusCode.OK)
End Function

在本文中，引用的JsonStringResultExtension归功于@NKosi。（包含代码以方便查阅）

Web Api: recommended way to return json string

public static class JsonStringResultExtension {
   public static CustomJsonStringResult JsonString(this ApiController controller, string jsonContent, HttpStatusCode statusCode = HttpStatusCode.OK) {
        var result = new CustomJsonStringResult(controller.Request, statusCode, jsonContent);
        return result;
    }

    public class CustomJsonStringResult : IHttpActionResult {
        private string json;
        private HttpStatusCode statusCode;
        private HttpRequestMessage request;

        public CustomJsonStringResult(HttpRequestMessage httpRequestMessage, HttpStatusCode statusCode = HttpStatusCode.OK, string json = "") {
            this.request = httpRequestMessage;
            this.json = json;
            this.statusCode = statusCode;
        }

        public Task<HttpResponseMessage> ExecuteAsync(CancellationToken cancellationToken) {
            return Task.FromResult(Execute());
        }

        private HttpResponseMessage Execute() {
            var response = request.CreateResponse(statusCode);
            response.Content = new StringContent(json, Encoding.UTF8, "application/json");
            return response;
        }
    }
}

进行这些更改，结果是json，将其正确推送到数组，并正确显示在Heroes列表中。

函数返回字符串而不是json对象

2 个答案: