Angular 7中如何依据另一对象数组排序并解决新增项顺序问题？

我来帮你搞定这个问题！你的核心需求有两个：一是让fieldRows（对应array1）的顺序完全匹配selectedOptions（对应array2），二是解决新增下拉框时项跑到首位的异常。我们一步步来解决：

一、实现严格匹配目标顺序的排序逻辑 #

你之前用filter的问题在于：filter是按照原数组（editOptions）的顺序保留符合条件的项，而不是按照selectedOptions的顺序来排列。要实现完全对齐selectedOptions的顺序，应该用map+find的组合：

public onSelect() {
  // 按selectedOptions的顺序，从editOptions中找到对应项
  this.fieldRows = this.selectedOptions.map(selectedItem => 
    this.editOptions.find(option => option.accessValue === selectedItem.modifiedOption)
  ).filter(Boolean); // 过滤掉可能匹配失败的undefined项

  this.disableSelected();
  this.optionSelected = true;
}

逻辑说明： #

1. map遍历selectedOptions（目标顺序数组），每一项都去editOptions里找到对应的accessValue与modifiedOption匹配的元素
2. 最终得到的数组顺序和selectedOptions完全一致，彻底解决顺序不匹配的问题
3. filter(Boolean)是为了避免出现undefined（比如selectedOptions里有找不到匹配的项时）

二、修复新增项位置异常的问题 #

你当前的addFieldRow只是往fieldRows里push了一个0，但后续onSelect会用filter结果完全覆盖fieldRows，导致新增的临时项被替换。结合上面的排序逻辑，你可以调整新增逻辑：

addFieldRow() {
  // 先往selectedOptions里添加一个临时的未选择项（用唯一标识占位）
  this.selectedOptions.push({ modifiedOption: `temp-${Date.now()}` });
  
  // 直接基于selectedOptions更新fieldRows，确保新增项在末尾
  this.fieldRows = this.selectedOptions.map(selectedItem => {
    // 如果是临时项，返回0（对应你之前的占位逻辑）
    if (selectedItem.modifiedOption.startsWith('temp-')) {
      return 0;
    }
    return this.editOptions.find(option => option.accessValue === selectedItem.modifiedOption);
  }).filter(Boolean);
}

逻辑说明： #

1. 新增时先更新selectedOptions（因为它是顺序的基准），把临时项放在数组末尾
2. 然后用同样的map逻辑生成fieldRows，临时项对应返回0，这样新增的下拉框就会出现在末尾，而不是被filter的顺序打乱

为什么之前的filter会导致新增项跑到首位？ #

假设你新增的项对应的accessValue在editOptions数组里的位置比较靠前，filter遍历editOptions时会先找到这个项并保留，所以它会出现在fieldRows的开头，而不是跟着selectedOptions的顺序在末尾。用map+find就完全规避了这个问题，因为顺序完全由selectedOptions决定。

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