Angular中HTTP json获取数据的方法

Question

请帮助我试图从 HTTP 链接获取 Json 数据

<span class="subjectSpan">{{ title }}</span>

和.ts文件conatins

  constructor(public dialog: MatDialog, private api:ServiceUserService) {};
  title:any;
  ngOnInit() {
      this.title = this.api.apiCall().subscribe(data => {
      this.title = data;
    })
  }

而 .service.ts 文件有

apiCall() {
    return this.httpClient.get('https://jsonplaceholder.typicode.com/todos/1');
  }

我在 module.ts 和 .ts 文件中导入了 HTTPCLIENTMODULE

仅来自 json 的数据不显示

[object object]作为结果出现。

json 文件包含

{"status":"success","results":2,"data":{"subject":[{"subject":"ART & HUMANITIES","numTitles":1,"slug":"art-humanities"},{"subject":"ANTHROPOLOGY","numTitles":1,"slug":"anthropology"}]}}

或出现此错误

Element implicitly has an 'any' type because expression of type '"title"' can't be used to index type 'Object'.
  Property 'title' does not exist on type 'Object'.

Answer 1

正如之前提到的，它显示 [Object object] 因为您发送的是整个 object。

如果你想看到它正常工作改变

<span class="subjectSpan">{{ title }}</span>

到

<span class="subjectSpan">{{ title | json }}</span>

如果您只想获得 object 的其中一个属性，那么我建议为 object 创建interface 。

通过这种方式，您可以键入变量title以更正 object（具有指定的属性），并且在模板中您可以获得任何您想要的内容，例如{{title.success}}

另外我建议你输入 function 的返回值。改变这个

apiCall() {
return this.httpClient.get('https://jsonplaceholder.typicode.com/todos/1');

}

到

apiCall(): Observable<**interface you have created**>{
    return this.httpClient.get<**interface you have created**>('https://jsonplaceholder.typicode.com/todos/1');
  }

编辑：最好仅在数据存在时将数据分配给变量，因此在这种情况下，请在您的订阅中添加条件。

Answer 2

它在标题中显示[对象对象]，因为您将整个 json object 传递给组件中声明的标题变量，而您应该在收到的 json Object 中指定键。例如：在您的 json 响应中，您有“主题":"ART & HUMANITIES" json -> 数据 -> 主题 -> 第 0 个索引 -> 主题

因此，您可能想要更改行 this.title = data; to this.title = data['data']['subject'][0]['subject'];

this.api.apiCall().subscribe(...) 也不会返回标题，因此删除该分配。

Answer 3

{{待办事项？ todos.id: "" }}

todos 存在数据然后显示数据。

Typescript公共待办事项：任何；

值分配 public varchar

待办事项 = res;