尝试将映射键转换为数组时遇到错误答案

【问题标题】：Experiencing errors when trying to convert map keys to an array尝试将映射键转换为数组时遇到错误
【发布时间】：2018-12-29 00:35:51
【问题描述】：

我正在尝试从地图转换可迭代的键，但是当我这样做时出现错误：

statistics.produceTypeData.keys 不是函数

我正在关注这个问题的答案：How to convert Map keys to array? 使其工作。

当我尝试替代方法（使用Array.from(statistics.produceTypeData.keys())）时，我得到一个不同的错误，即：

类型“IterableIterator”不是数组类型。

在我读过的 cmets 中，在这种情况下，应该将 Array.from() 语句括在扩展语法中，但是当我这样做时，我也会收到错误 statistics.produceTypeData.keys is not a function。

这里是sn-ps的代码：

  produceTypeLabels: ProduceType[];
      this.produceTypeLabels = [...Array.from(statistics.produceTypeData.keys())];

ProduceType 枚举：

export enum ProduceType {
    FRUIT = "FRUIT",
    VEGETABLE = "VEGETABLE",
    HERB = "HERB",
    NUT = "NUT",
    SEED = "SEED",
    MUSHROOM = "MUSHROOM",
    CACTUS = "CACTUS"
}

统计对象来自一个获取请求，如下所示：

export class DatabaseStatisticsDTO {
    produceTypeData: Map<ProduceType,number>;
    plantTypeData:  Map<PlantType,number>;
    lifeCycleData:  Map<LifeCycleType,number>;
    sunExposureData:  Map<SunExposure,number>;
    ripeColorData:   Map<Color,number>;
    frostResistanceData: Map<boolean,number>;
    teaPlantData: Map<boolean,number>;
    climbingPlantData: Map<boolean,number>; 
    pepperData: Map<boolean,number>; 
}

有人知道我为什么会收到这些错误吗？我知道我可以简单地迭代可迭代的键并以这种方式填充数组，但我真的很想使用扩展语法或 Array.from() 函数来完成。

谢谢

编辑：

这是当我尝试将扩展语法与 statistics.produceTypeData.keys() 一起使用时来自调试器的堆栈跟踪

RROR TypeError: statistics.produceTypeData.keys is not a function
    at SafeSubscriber._next (database-statistics.component.ts:65)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:79)

编辑 2：更改了 DatabaseStatisticsDTO，以便使用空 Map 对象初始化地图字段，但在获取请求后这些字段仍然未定义。

export class DatabaseStatisticsDTO {
    produceTypeData: Map<ProduceType,number> = new Map<ProduceType,number>();
    plantTypeData:  Map<PlantType,number> = new Map<PlantType,number>();
    lifeCycleData:  Map<LifeCycleType,number> = new Map<LifeCycleType,number>();
    sunExposureData:  Map<SunExposure,number> = new Map<SunExposure,number>();
    ripeColorData:   Map<Color,number> = new Map<Color,number>();
    frostResistanceData: Map<boolean,number> = new Map<boolean,number>();
    teaPlantData: Map<boolean,number> = new Map<boolean,number>();
    climbingPlantData: Map<boolean,number> = new Map<boolean,number>();
    pepperData: Map<boolean,number> = new Map<boolean,number>(); 
}

这是发出 get 请求的代码：

  getStatistics():Observable<DatabaseStatisticsDTO>{
    return this.http.get<DatabaseStatisticsDTO>(this.apiUrl + "/mod/getstatistics");
  }

【问题讨论】：

如果你能告诉我们statistics.produceTypeData，它可能有助于重现问题。
如果它真的来自“获取请求”，它没有地图。
你的目标是 ES5 还是更低？
为了创建地图，您必须像通过地图构造函数一样创建它。如果您没有对 json 进行任何反序列化，则 json 中的所有映射都将只是对象文字而不是映射
@Maurice 我认为您需要将produceTypeData 记录到控制台（或调试器）并查看它。这不是你想的那样。

标签： javascript angular typescript angular5

【解决方案1】：

好的，我解决了这个问题。问题是我期待一个包含 map 对象的对象，但是它们真正包含的是需要首先转换为 Map 对象的对象文字。现在的代码如下所示：

  this.produceTypeLabels = Object.keys(statistics.produceTypeData); 
  this.produceTypeData  = (<any>Object).values(statistics.produceTypeData).map(a => Number(a));
  this.produceTypeBackgroundColors = ["#9400D3","#0000FF","#00FF00"];

我正在使用 Object.keys 从对象文字中获取关键部分，并使用 (<any>Object).values 获取值。我使用(<any>Object) 而不仅仅是 Object 的原因是因为我没有安装 ES2017 库。我尝试这样做，但仍然收到警告，即 values() 不是对象的函数。作为替代，可以使用(<any>Object)

【讨论】：