Angular拖拽：数组长度更新正常但模板未动态更新数组内容

我参照Angular官方文档实现了拖拽功能，为Monday、Tuesday等数组创建拖拽容器，组件类中定义了对应数组及drop方法处理拖拽逻辑。当在容器间拖拽任务项时，模板中数组的length属性能正确更新，但直接绑定显示数组内容（如{{ Monday }}）时无变化，想请教为何出现这种情况。

关键代码 #

HTML容器示例

<div class="example-container flex flex-col text-center h-fit min-h-[10rem] w-[15%] border-2 border-gray-100 rounded-md shadow-md">
  <h2 class="text-xl font-semibold mx-auto py-4 bg-green-100 w-full drop-shadow-md">
    Monday
  </h2>
  <div cdkDropList [cdkDropListData]="Monday" class="example-list bg-red-100 min-h-[5rem]" (cdkDropListDropped)="drop($event)">
    @for (item of Monday; track item) {
    <app-drag-drop-item [title]="item" cdkDrag></app-drag-drop-item>
    }
  </div>
</div>

组件类关键代码

Monday = ['Refractoring'];
Tuesday = ['Gym'];

drop(event: CdkDragDrop<string[]>) {
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
  }
}

问题原因 #

Angular的变更检测依赖引用变化触发。moveItemInArray和transferArrayItem这两个CDK方法都是在原数组基础上做内部修改（比如通过splice调整元素位置/转移元素），数组本身的引用并未改变。

模板中直接插值{{ Monday }}时，Angular默认不会深度监听数组内部元素的变动，只会在数组引用更新时同步视图。但length是基础数值类型，它的变化会被即时检测到，所以能正常显示更新。

解决方案 #

有两种常用的处理方式：

1. 手动触发变更检测

注入ChangeDetectorRef，在数组修改后强制触发变更检测：

import { ChangeDetectorRef } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

constructor(private cdr: ChangeDetectorRef) {}

drop(event: CdkDragDrop<string[]>) {
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
  }
  this.cdr.detectChanges(); // 强制更新视图
}

2. 修改数组引用

完成数组操作后，通过扩展运算符重新赋值数组，改变其引用，让Angular自动检测到变化：

drop(event: CdkDragDrop<string[]>) {
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    // 重新赋值对应数组，更新引用
    if (event.container.data === this.Monday) {
      this.Monday = [...this.Monday];
    } else if (event.container.data === this.Tuesday) {
      this.Tuesday = [...this.Tuesday];
    }
  } else {
    transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
    // 同时更新原容器和目标容器的数组引用
    if (event.previousContainer.data === this.Monday) {
      this.Monday = [...this.Monday];
    } else if (event.previousContainer.data === this.Tuesday) {
      this.Tuesday = [...this.Tuesday];
    }
    if (event.container.data === this.Monday) {
      this.Monday = [...this.Monday];
    } else if (event.container.data === this.Tuesday) {
      this.Tuesday = [...this.Tuesday];
    }
  }
}

另外，你已经使用的@for循环会自动追踪数组内部元素的变化，所以拖拽列表能正常渲染更新，这也是列表显示正常但直接插值数组内容无变化的核心差异。

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