Ember中#each循环内通过索引从另一数组选取对象的实现问题

Ember模板不支持直接用[索引]语法访问数组元素，可通过以下两种方案实现需求：

方案1：使用内置get助手（临时场景适用） #

直接修改模板代码即可，Ember内置的get助手支持传入数组和索引值返回对应位置的元素，修改后代码如下：

{{#each array1 as |element index|}}
  <Component1 @prop={{element}} @prop2={{get @array2 index}} />
{{/each}}

如果需要处理array2长度短于array1的边界场景，可以加默认值兜底：

{{#each array1 as |element index|}}
  <Component1 @prop={{element}} @prop2={{if (get @array2 index) (get @array2 index) "默认值"}} />
{{/each}}

方案2：JS层预先合并数组（最佳实践推荐） #

如果两个数组需要长期配对使用，更推荐在组件/控制器的JS层提前合并为一个对象数组，减少模板层逻辑，也更方便后续维护。
示例JS代码（基于Glimmer组件规范）：

import Component from '@glimmer/component';

export default class YourComponent extends Component {
  get pairedArray() {
    return this.args.array1.map((item, index) => ({
      array1Item: item,
      array2Item: this.args.array2?.[index]
    }))
  }
}

对应模板代码可简化为：

{{#each this.pairedArray as |pairedItem|}}
  <Component1 @prop={{pairedItem.array1Item}} @prop2={{pairedItem.array2Item}} />
{{/each}}

内容的提问来源于stack exchange，提问作者Mithun raj