订阅observable时无法正确分配对象

Question

在将对象分配给json data时，我似乎遇到了问题。我想我在创建包含数组的接口时遇到了困难。

这是我的界面：

interface QAmount{
    read: string;
    amount: number;
}

export interface FRow{
    AmountName: string;
    AttachedAmount?: QAmount[];
}

在我的组件中，我订阅了构造函数中的观察值，如下所示：

newData: FRow[];

  ngOnInit() {
    this.jsonService.getData().subscribe(data => {
      this.newData = data;
      console.log(data);
    })
  }

console.log中显示的返回数据为：

basic: {2019-1: "7,672", 2018-2: "7,698", 2019-3: "7,679", 2018-4: "7,706"}
basic $: {2019-1: "1.15", 2018-2: "$0.96", 2019-3: "$3.39", 2018-4: "$1.00"}
cost of revenue:: ""
diluted: {2019-1: "7,744", 2018-2: "7,794", 2019-3: "7,759", 2018-4: "7,798"}
diluted $: {2019-1: "1.14", 2018-2: "$0.95", 2019-3: "$3.36", 2018-4: "$0.99"}
earnings per share:: ""
general and administrative: {2019-1: "1,179", 2018-2: "1,208", 2019-3: "3,460", 2018-4: "3,483"}
gross margin: {2019-1: "20,401", 2018-2: "17,550", 2019-3: "59,628", 2018-4: "51,664"}
income before income taxes: {2019-1: "10,486", 2018-2: "8,641", 2019-3: "31,092", 2018-4: "25,794"}
net income $: {2019-1: "8,809", 2018-2: "$7,424", 2019-3: "$26,053", 2018-4: "$7,698"}
operating income: {2019-1: "10,341", 2018-2: "8,292", 2019-3: "30,554", 2018-4: "24,679"}
other income, net: {2019-1: "145", 2018-2: "349", 2019-3: "538", 2018-4: "1,115"}
product: {2019-1: "3,441", 2018-2: "3,425", 2019-3: "12,975", 2018-4: "11,903"}
product $: {2019-1: "15,448", 2018-2: "$15,114", 2019-3: "$48,966", 2018-4: "$47,338"}
provision for income taxes: {2019-1: "1,677", 2018-2: "1,217", 2019-3: "5,039", 2018-4: "18,096"}
research and development: {2019-1: "4,316", 2018-2: "3,715", 2019-3: "12,363", 2018-4: "10,793"}
revenue:: ""
sales and marketing: {2019-1: "4,565", 2018-2: "4,335", 2019-3: "13,251", 2018-4: "12,709"}
service and other: {2019-1: "6,729", 2018-2: "5,844", 2019-3: "19,523", 2018-4: "16,708"}
total cost of revenue: {2019-1: "10,170", 2018-2: "9,269", 2019-3: "32,498", 2018-4: "28,611"}
total revenue: {2019-1: "30,571", 2018-2: "26,819", 2019-3: "92,126", 2018-4: "80,275"}
weighted average shares outstanding:: ""

我试着稍微改变一下界面，但仍然没有效果。在我的html中使用*ngFor时收到的错误是：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

更新JSON列表

我相信这就是我正在寻找的正确输出。

{list: {…}}
list:
basic: {2019-1: "7,672", 2018-2: "7,698", 2019-3: "7,679", 2018-4: "7,706"}
basic $: {2019-1: "1.15", 2018-2: "$0.96", 2019-3: "$3.39", 2018-4: "$1.00"}
cost of revenue:: {}
diluted: {2019-1: "7,744", 2018-2: "7,794", 2019-3: "7,759", 2018-4: "7,798"}
diluted $: {2019-1: "1.14", 2018-2: "$0.95", 2019-3: "$3.36", 2018-4: "$0.99"}
earnings per share:: {}
general and administrative: {2019-1: "1,179", 2018-2: "1,208", 2019-3: "3,460", 2018-4: "3,483"}
gross margin: {2019-1: "20,401", 2018-2: "17,550", 2019-3: "59,628", 2018-4: "51,664"}
income before income taxes: {2019-1: "10,486", 2018-2: "8,641", 2019-3: "31,092", 2018-4: "25,794"}
net income $: {2019-1: "8,809", 2018-2: "$7,424", 2019-3: "$26,053", 2018-4: "$7,698"}
operating income: {2019-1: "10,341", 2018-2: "8,292", 2019-3: "30,554", 2018-4: "24,679"}
other income, net: {2019-1: "145", 2018-2: "349", 2019-3: "538", 2018-4: "1,115"}
product: {2019-1: "3,441", 2018-2: "3,425", 2019-3: "12,975", 2018-4: "11,903"}
product $: {2019-1: "15,448", 2018-2: "$15,114", 2019-3: "$48,966", 2018-4: "$47,338"}
provision for income taxes: {2019-1: "1,677", 2018-2: "1,217", 2019-3: "5,039", 2018-4: "18,096"}
research and development: {2019-1: "4,316", 2018-2: "3,715", 2019-3: "12,363", 2018-4: "10,793"}
revenue:: {}
sales and marketing: {2019-1: "4,565", 2018-2: "4,335", 2019-3: "13,251", 2018-4: "12,709"}
service and other: {2019-1: "6,729", 2018-2: "5,844", 2019-3: "19,523", 2018-4: "16,708"}
total cost of revenue: {2019-1: "10,170", 2018-2: "9,269", 2019-3: "32,498", 2018-4: "28,611"}
total revenue: {2019-1: "30,571", 2018-2: "26,819", 2019-3: "92,126", 2018-4: "80,275"}
weighted average shares outstanding:: {}

Answer 1

这不是您在结果中显示的数组。实际上，有些部分甚至不是有效的JSON，所以你可能想检查一下你的后端/API是如何格式化数据的。

要知道，TypeScript是JavaScript的超集，编译后生成的代码中没有残留的工件。TypeScript只能帮助您在编译代码之前防止代码中的错误和发现错误。因此，更改TypeScript上的interface绝不会影响接收的数据。

如果您获得了有效的JSON，则可以使用工具生成有效的TypeScript interfaces和classes，然后可以使用它们进行编程。jsontoTS就是一个很好的例子。

如果您使用来自后端的有效JSON数据更新了您的问题，请让我知道；我也许可以向您提供更多关于在哪里查找以及哪些是好的实践的建议。

Answer 2

你接收的数据是一个对象，而不是数组，所以*ngFor不能使用它。要解决此问题，请尝试：

ngOnInit() {
this.jsonService.getData().subscribe(data => {
  this.newData = [data];
  console.log(data);
  })
}

但是您似乎有一个架构问题，因为您的接口和api数据不匹配