使用 Angular httpClient 返回数据的问题答案

【问题标题】：Problems returning data with Angular httpClient使用 Angular httpClient 返回数据的问题
【发布时间】：2018-11-08 15:50:11
【问题描述】：

您好，我有一个简单的控制器，它返回一个简单的（我已经为这篇文章简化了所有内容）：

  [HttpGet("[action]")]
  public AppSettings GetStuff()
  {
        var stuff = new Stuff { Dummy = ”Hi”; };
        return stuff;
  }

  public class Stuff
  {
    public string Dummy { get; set; }
  }

很好，现在我从我的 Angular 服务中调用它：

getStuff(): Observable<IStuff> {
    return (this.httpClient
        .get<IStuff>(this.localUrl)
        .pipe(
            catchError(this.errorHandlerSerevice.handleError)
        )) as any;
}

这是我的 IStuff：

export interface IStuff {
    Dummy?: string;
}

一切都好…… 控制台向我显示 200 和响应...

但是当我从我的组件订阅 getStuff() 时，我得到 [object object] 或 udentified… 我尝试了几次订阅，但没有运气：

stuff: IStuff;

getStuff(){
    this.stuffService.getStuff()
        .subscribe(stuff => this.stuff = stuff); 
}
Or:
getStuff(){
    this.stuffService.getStuff()
        .subscribe((data: IStuff) => this.stuff = {
            Dummy: data['Dummy']
        });
}

有什么想法吗？

【问题讨论】：

您从哪里得到[object object] or udentified？在控制台上？您究竟在哪里记录响应？
控制台按预期返回json对象。我在订阅绑定期间得到未定义：stuff => this.stuff = stuff，或者在单步执行代码并将鼠标悬停在 data['Dummy'] 上时。
如果我这样做，例如 .subscribe(data => { this.stuff = data; alert(data); });我得到 [Object Object]....
那是因为alert 将在您的对象上调用toString()，这将导致[Object object]。如果你想要 JSON 格式，你需要自己打电话给JSON.stringify

标签： angular http get observable

【解决方案1】：

当你这样做时：

instance .subscribe(data => { this.stuff = data; alert(data); });

您正在尝试在警告框中打印data。但是由于data 是一个JavaScript 对象，您会看到[Object object]，因为警报会调用toString。如果你想打印实际内容，你必须stringify它。

试试这个：

alert(JSON.stringify(data));

这应该打印实际的响应。

【讨论】：