Question

我尝试使用后端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.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)
    }
}

数据object.ts

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

这似乎是正确获取数据，但它输入错误或包含在额外的对象或其他内容中，表格无法读取。没有错误;只是空表。有趣的是，我在表声明之前将其添加到我的html中，以确保我的数据能够通过：

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

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

我尝试了上述代码的各种变体，包括和不使用类型检查;我尝试删除json内容标题，将其读取为纯文本，然后使用JSON.parse()。我意识到我可以遍历数组，实例化DataObject并在将它们推送到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获取对象数组

1 个答案: