Angular 6: 通过httpClient从对应的JSON获取对象数组

Question

Angular 6: 通过httpClient从对应的JSON获取对象数组

3

我正在尝试从后端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实现相同的功能呢？

以下是我的进展情况：

data-service.service.ts：

@Injectable()
export class DataService {

    constructor (private http: HttpClient) {}

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

table-view.route.ts:

export class TableView implements OnInit {

    rows: Array<DataObject>;

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

data-object.ts

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

这似乎正确地获取了数据，但它的类型错误或包装在额外的对象中，导致表格无法读取。没有错误；只是空表格。有趣的是，在表格声明之前，我添加了这个来确保我的数据能够通过：

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

这段代码可以正确输出 "val1"，同时也将所有数据填充到表格中。这个访问方式是否改变了 rows 的类型使其能够被表格组件理解？我尝试了各种以上代码的变化，包括有无类型检查，尝试删除 JSON 内容头，将其读取为纯文本，然后使用 JSON.parse()。我意识到，我可以遍历数组，实例化 DataObject 并逐个映射字段，然后将它们推入 rows，但肯定有更简单的方法来完成这个任务... 任何指向正确方向的推荐都会受到赞赏。

- kxb

尝试使用 rows: Array<DataObject>=[] - Vikas

你能展示一下从服务器返回的JSON吗？你应该能在浏览器开发工具的网络部分找到它。 - peinearydevelopment

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- austinthedeveloper · Accepted Answer

我认为这是因为this.rows = result未被包裹在{}中。您能够记录输出您的订阅以确保它实际上已经返回吗？

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

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