代码之家 › 专栏 › 技术社区 › Maurice

尝试将映射键转换为数组时出错

angular5 typescript angular javascript

Maurice · 技术社区 · 7 年前

我正在尝试从映射中转换不可识别的键,但当我这样做时,会得到错误:

statistics.producetypedata.keys不是函数

我在回答这个问题: How to convert Map keys to array? 让它发挥作用。

当我尝试其他方法(使用 Array.from(statistics.produceTypeData.keys()) )我得到一个不同的错误,即:

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

在注释中,我已经读到,在这种情况下,应该将array.from()语句用spread语法括起来,但是当我这样做时,我也会得到错误。 statistics.produceTypeData.keys is not a function .

以下是代码段:

  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"
}

statistics对象来自get请求,如下所示:

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>; 
}

有人知道我为什么会犯这些错误吗?我知道我可以简单地迭代iterable键并以这种方式填充数组,但我真的想用spread语法或array.from()函数来完成。

谢谢你

编辑:

这是调试器中的stacktrace,当我尝试将spread语法与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)

edit 2:已将databasestatisticsdto更改为使用空映射对象初始化映射字段,但在GET请求之后这些字段仍然未定义。

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");
  }

1 回复 | 直到 7 年前

Maurice 7 年前

好的,我解决了这个问题。问题是我期望一个包含映射对象的对象,但是它们真正包含的是需要首先转换为映射对象的对象文本。现在代码如下:

  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) 而不仅仅是对象是因为我没有安装ES2017库。我尝试过这样做,但仍然收到一个警告,即values()不是对象的函数。作为另一种选择 (任何对象)