改变表格数组的位置答案

【问题标题】：Change positions of form array改变表格数组的位置
【发布时间】：2023-01-20 01:43:26
【问题描述】：

我有一个表格，我在其中显示来自表单的信息，我有一个添加记录的按钮，但是当我生成新元素时，它占据了最后一个位置，我希望它占据位置 0 我尝试使用 splice 函数，但是它没有用，当我刷新数据源时，位置在拼接之前仍然相同

my form array
  myformArray = new FormArray([
    this.formBuilder.group({
      id: [0, Validators.required],
      empleado: ["Juan Antonio Vazquez", Validators.required],
      nss: ["ass5495d", Validators.required],
      capacitacion: ["SI", [Validators.required, Validators.email]]
    })
  ])

添加新记录

  addRow() {
    let a =
      this.formBuilder.group({
        id: [1, Validators.required],
        empleado: ['', Validators.required],
        nss: ["", Validators.required],
        capacitacion: ["", [Validators.required, Validators.email]]
      })
    this.myformArray.push(a);
    let fromIndex = this.myformArray.value.indexOf(a.value);
    let toIndex = 0;
    let element = this.myformArray.value.splice(fromIndex, 1)[0];
 

    this.myformArray.value.splice(toIndex, 0, element);

    this.dataSource.data = this.myformArray.controls

  }

【问题讨论】：

标签： angular typescript forms angular-material

【解决方案1】：

在来自的一点帮助下材料cdkDrag您可以使用moveItemInArray 功能。查看代码here。

这是函数本身：

export function moveItemInArray<T = any>(array: T[], fromIndex: number, toIndex: number): void {
  const from = clamp(fromIndex, array.length - 1);
  const to = clamp(toIndex, array.length - 1);

  if (from === to) {
    return;
  }

  const target = array[from];
  const delta = to < from ? -1 : 1;

  for (let i = from; i !== to; i += delta) {
    array[i] = array[i + delta];
  }

  array[to] = target;
}

称它为moveItemInArray(this.myformArray, 0, 2) 之类的简单名称。玩得开心！

笔记

clamp 函数有助于确定最小值/最大值。因此，您不能像 array.length 那样拥有更高的 to 参数。

function clamp(value: number, max: number): number {
  return Math.max(0, Math.min(max, value));
}

【讨论】：

【解决方案2】：

我不确定这是否能解决您的问题，但如果您想插入一个项目一开始一个数组，你可以使用unshift方法。

【讨论】：