Question

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

这是我的界面：

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数据不匹配

订阅可观察对象时无法正确分配对象

2 个答案: