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

【问题标题】：Can't properly assign object when subscribing to observable订阅 observable 时无法正确分配对象
【发布时间】：2019-06-04 01:09:55
【问题描述】：

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

这是我的界面：

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

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

在我的组件中，我在构造函数中订阅了 observable：

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:: {}

【问题讨论】：

好吧，数据似乎不是一个数组。所以你不能迭代它。为什么你认为它是（或应该是）一个数组？

标签： angular typescript

【解决方案1】：

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

了解 TypeScript 是 JavaScript 的超集，编译后生成的代码中没有剩余的工件。 TypeScript 仅帮助您在编译代码之前防止错误并发现代码中的错误。因此，更改 TypeScript 上的 interface 绝不会影响接收到的数据。

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

如果您使用来自后端的有效 JSON 数据更新您的问题，请告诉我；我也许可以为您提供更多关于在哪里查看以及哪些可能是好的做法的指示。

【讨论】：

啊，我知道哪些部分使它无效 JSON。基本上是空数组
如果你能解决这个问题并用新的数据和界面更新你的问题；给我发一条信息。我很乐意再看看！
@CgOnvMM 您向我们展示的数据中似乎有 NO 数组。仅包含对象的对象。
嗯好吧，看看你们都在说什么。这是我的python代码中的一个错误。如果相反，我遍历 JSON 响应中的每个对象并将其添加到数组中呢？
让它按预期工作。 jsontots.com 的主要荣誉。很大的帮助

【解决方案2】：

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

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

但是看来你有架构问题，因为你的接口和你的 api 数据不匹配

【讨论】：