如何构造可注入`dom-repeat`的关联数组？解决非类数组报错

你遇到的核心问题很明确：你以为是数组的数组，实际上是一个键为数字的普通对象（比如{0: Array(1), 1: Array(1), ...}），而dom-repeat只认真正的数组或者符合可迭代规范的集合，所以才会抛出这个报错。

下面给你两种实用的解决办法：

方法一：把对象转换成真正的数组（推荐） #

你可以用Object.values()方法快速提取对象里的所有值，转换成标准数组。在Polymer元素里可以通过计算属性来处理：

static get properties() {
  return {
    // 你的原始订单分组数据（键为数字的对象）
    rawOrderGroups: Object,
    // 转换后的标准数组，供dom-repeat使用
    orderGroups: {
      type: Array,
      computed: '_convertToStandardArray(rawOrderGroups)'
    }
  };
}

_convertToStandardArray(rawData) {
  // 空值判断，避免报错
  if (!rawData) return [];
  // 提取对象的所有值，生成真正的数组
  return Object.values(rawData);
}

然后在模板里直接使用转换后的数组：

<card-parent>
  <template is="dom-repeat" items="[[orderGroups]]" index-as="groupIndex">
    <card-item-group data="[[item]]" group-index="[[groupIndex]]"></card-item-group>
  </template>
</card-parent>

方法二：直接迭代对象的键值对（不推荐，除非特殊需求） #

如果不想转换数组，也可以通过Object.entries()获取对象的键值对数组，然后在模板里分别取键和值：

static get properties() {
  return {
    rawOrderGroups: Object
  };
}

_getOrderGroupEntries(rawData) {
  if (!rawData) return [];
  // 返回格式：[[键1, 值数组1], [键2, 值数组2], ...]
  return Object.entries(rawData);
}

模板里的用法：

<card-parent>
  <template is="dom-repeat" items="[[_getOrderGroupEntries(rawOrderGroups)]]">
    <!-- item[0]是原对象的数字键，item[1]是对应分组的订单行数组 -->
    <card-item-group data="[[item.1]]" group-index="[[item.0]]"></card-item-group>
  </template>
</card-parent>

最后可以验证一下转换结果：在控制台打印Array.isArray(orderGroups)，如果返回true，说明已经是标准数组，dom-repeat就能正常识别了。

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