Javascript 在每个对象上使用最后一个索引的Angular/TypeScript贴图

我试图为一张地图创建一个包含120个十六进制对象的数组，然后为每个对象添加信息

当我使用map时，id应该是当前对象的索引，我可以按预期记录正确的当前索引，但由于某些原因，每个对象的id都是119。我在这里和Mozilla上看了一些其他的地图示例，我不知道哪里出了问题

export class MapComponent implements OnInit {

  arrayOfObjects = Array(120).fill({})
  hexTiles = this.arrayOfObjects.map( (hex, index) => this.createHex(hex, index))

  constructor() { }

  ngOnInit() {
  }

  createHex(hex, index){
    console.log('Current Index', index)
    hex['id'] = index
    hex['x-coordinate'] = null
    hex['y-coordinate'] = null
    hex['mapped'] = false
    hex['terrain'] = ''
    hex['details'] = ''

    return hex
  }

}

更新 我尝试了一个建议的解决方案，但现在得到了一个120个空对象的数组。 以下是更新的代码：

HTML：这不显示任何内容

<div>
  <div *ngFor="let hex of hexTiles; let i = index">
    <pre>
      {{hex}}
    </pre>
  </div>
</div>

改变

为此

以下是一个工作片段：

函数createHexhex，index{ 十六进制['id']=索引； 十六进制['x坐标']=null； 十六进制['y坐标']=null； 十六进制['mapped']=false； 十六进制['terrain']=； 十六进制['details']=； 返回十六进制； } const hexTiles=[…Array120].map_，i=>createHex{}，i； 控制台。日志文件 改变

为此

以下是一个工作片段：

函数createHexhex，index{ 十六进制['id']=索引； 十六进制['x坐标']=null； 十六进制['y坐标']=null； 十六进制['mapped']=false； 十六进制['terrain']=； 十六进制['details']=； 返回十六进制； } const hexTiles=[…Array120].map_，i=>createHex{}，i；

---

控制台。日志文件；您可以简化this.arrayOfObjects.map hex，index=>this.createHexhex，索引为this.arrayOfObjects.mapthis.createHex，但不确定这是否能解决您的PLM问题。@gv0000，我更新了答案以解决[…Array120]问题，对此表示抱歉。hexTiles=Array.from{length:120}.map_，i=>this.createHex{}，i；应该可以工作，但您的方法也可以工作，只是不要使用映射中的数组内容。您可以简化这个。arrayOfObjects.map hex，index=>this.createHex，只索引到this.arrayOfObjects.mapthis.createHex，不确定这是否会解决您的问题。@gv0000，我更新了我的答案以解决[…Array120]问题，对此表示抱歉。hexTiles=Array.from{length:120}.map_，i=>this.createHex{}，i；应该可以，但是您的方法也可以，只是不要使用Map中的数组内容为什么这样做，而不是OP正在做什么？解释总是好的：是的，绝对正确，我正在用另一个例子更新答案这很奇怪，因为你的函数正在设置属性id并读取它。你有更多的细节吗？它不应该与生命周期方法相关，因为你不依赖于来自你的视图或角度的任何数据，并且一切都是在构建时运行的。你介意分享一个Stackblitz吗？@jo_va我很感兴趣为什么[…Array120]不起作用，显然这是一个TS bug。。。从很久以前开始。奇怪的是还没修好？！如果你想通过说这是一个bug来扩展你的答案，这里有一个链接作为参考：：为什么这个工作，而不是OP在做什么？解释总是好的：是的，绝对正确，我正在用另一个例子更新答案这很奇怪，因为你的函数正在设置属性id并读取它。你有更多的细节吗？它不应该与生命周期方法相关，因为你不依赖于来自你的视图或角度的任何数据，并且一切都是在构建时运行的。你介意分享一个Stackblitz吗？@jo_va我很感兴趣为什么[…Array120]不起作用，显然这是一个TS bug。。。从很久以前开始。奇怪的是还没修好？！如果你想通过说这是一个bug来扩展你的答案，这里有一个链接作为参考：

export class MapComponent implements OnInit {

  hexTiles = [...Array(120)].map((_, i) => this.createHex({}, i));


  constructor() { }

  ngOnInit() {
    console.log('Hexs', this.hexTiles);
  }

  createHex(hex, index) {
    hex['id'] = index;
    hex['x-coordinate'] = null;
    hex['y-coordinate'] = null;
    hex['mapped'] = false;
    hex['terrain'] = '';
    hex['details'] = '';
    return hex;
  }

}

arrayOfObjects = Array(120).fill({})
hexTiles = this.arrayOfObjects.map( (hex, index) => this.createHex(hex, index))

hexTiles = [...Array(120)].map((_, i) => this.createHex({}, i));