Angular中FormArray.insert选中索引为0时插入位置错误问题

我正在开发一款用于计算用户自定义公式的Angular应用，每个操作数以mat-chip形式展示，点击芯片可设置新操作数的插入起始位置。组件核心代码如下：

export class ServiceComponent implements OnInit {

// stores the position where to add new operands
selectedChipIndex: number;

// updates the selectedChipIndex
clickOnChip(formulaType: any, index?: number): void {
    if (index) {
      this.selectedChipIndex = index;
    } else {
      this.selectedChipIndex = undefined;
    }
  }

// adds the new operand
append(valueToAdd: string) {
    let fr = this.form.get(this.formula) as FormArray;
    if (this.selectedChipIndex != undefined) {
      // insert in the following position
      fr.insert(this.selectedChipIndex+1, valueToAdd)
      // update the selectedChipIndex for next insertion
      this.selectedChipIndex += 1;
    } else {
      // insert at end
      fr.push(valueToAdd);
    }
  }
}

问题现象 #

当selectedChipIndex不为0时功能正常，例如selectedChipIndex=1、fr=['1','+','2']、valueToAdd=5时，结果为['1','+','5','2']。但当selectedChipIndex=0时，结果变为['1','+','2','5']，而非预期的['1','5','+','2']。

原因分析 #

问题出在clickOnChip方法的参数判断逻辑上：JavaScript中数字0会被视为布尔值false。当点击索引为0的芯片时，传入的index值是0，此时if (index)的判断结果为false，代码会执行else分支，将selectedChipIndex设置为undefined。后续调用append方法时，就会触发末尾追加的逻辑，而非插入到预期位置。

修复方案 #

修改clickOnChip方法的判断条件，明确检查index是否为undefined，而不是依赖其布尔值转换：

clickOnChip(formulaType: any, index?: number): void {
    if (index !== undefined) {
      this.selectedChipIndex = index;
    } else {
      this.selectedChipIndex = undefined;
    }
}

这样无论index是0还是其他有效索引，只要传入了值，就能正确设置selectedChipIndex，append方法会按照预期位置插入新操作数。

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