时间戳

首页 > 解决方案 > Angular 6：通过httpClient从相应的JSON中获取对象数组

arrays - Angular 6：通过httpClient从相应的JSON中获取对象数组

问题描述

我正在尝试使用来自后端 API 的数据填充表。该表需要一个rows对象数组的输入，每个对象代表表中的一行并由列名/值对组成。后端发布一组 JSON 对象，如下所示：

[{"column1":"val1","column2":"val2"},{"column1":"valA","column2":"valB"}]

如果我只是将该字符串复制并粘贴到我的 .ts 文件中并将其直接分配给 rows 属性，则一切正常：

this.rows = [{"column1":"val1","column2":"val2"},{"column1":"valA","column2":"valB"}]

无论rows属性是否定义为any或Array<DataObject>介于两者之间，这都有效。那么为什么我似乎无法通过 httpClient 实现相同的功能呢？

这是我到目前为止所拥有的：

数据服务.service.ts：

@Injectable()
export class DataService {

    constructor (private http: HttpClient) {}

    public getData() {
        return this.http.get<Array<DataObject>>(apiURL, {responseType : 'json'});
    }

表-view.route.ts：

export class TableView implements OnInit {

    rows: Array<DataObject>;

    constructor(dataService: DataService) {
        dataService.getData()
                   .subscribe((result: Array<DataObject>) => this.rows = result)
    }
}

数据对象.ts

export interface DataObject {
    column1: string;
    column2: string;
}

这似乎正确地获取了数据，但是输入错误或包装在额外的对象或其他东西中，并且表无法读取它。没有错误；只是空桌子。有趣的是，我在表声明之前将其添加到我的 html 中，以确保我的数据能够通过：

<div>{{rows[0].column1}}</div>

这会正确输出“val1”，并突然用所有数据填充表。这种访问是否以某种方式将类型更改为rows表格组件可以理解的内容？

我已经尝试了上述代码的各种变体，有无类型检查；我尝试删除 json 内容标头，将其作为纯文本读取，然后使用JSON.parse(). 我意识到我可以遍历数组，实例化DataObjects 并在将它们推送到之前单独映射字段rows，但是必须有一种更简单的方法来做到这一点，对吧......？任何朝着正确方向的推动将不胜感激。

标签： arraysjsonangularangular-httpclient

解决方案

我相信这是因为this.rows = result没有包裹在{}. 你能注销你的订阅以确保它真的回来了吗？

dataService.getData()
.subscribe(
  (result: Array<DataObject>) => { 
    console.log('success', result);
    this.rows = result
  },
  (error: any) => { 
    console.log('error', error);
  }
)

我还建议将该调用移至 NgOnInit 而不是构造函数。

推荐阅读