Angular 6：通过httpClient从对应的JSON获取objects的数组

Question

我正在尝试使用来自后端 API 的数据填充 table。 table 需要一个 rows 输入，它是 object 的数组，每个 object 代表 table 中的一行并由 column-name/value 组成对。后端发布一个 JSON object 数组，如下所示：

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

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

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;
}

这似乎正确地获取了数据，但它输入错误或包含在额外的 object 或其他内容中，并且 table 无法读取它。没有错误；只是空 table。有趣的是，我在 table 声明之前将此添加到我的 html 只是为了确保我的数据通过：

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

这正确地输出了 "val1"，并且突然用所有数据填充了 table。此访问是否以某种方式将 rows 的类型更改为 table 组件可以理解的类型？

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

Answer 1

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

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

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

Angular 6：通过httpClient从对应的JSON获取objects的数组

Angular 6: get array of objects from corresponding JSON through httpClient

arrays

json

angular

angular-httpclient