Angular cdkDragDrop 行为随着 Angular 的更新而改变，拖动开始时 UI 不再更新

Question

我们有一个包含可以拖放项目的组件，我们使用 CDK 拖/放模块来管理它。

部分功能是当用户开始拖动时更改底层对象的属性。为了更新 UI，我们调用 ChangeDetectorRef.detectChanges()。

在 Angular 版本 9 上，这工作得很好，但是自从更新到版本 12.1 后，UI 不再更新，直到拖动的项目被放下，我找不到让它工作的方法，

这是该组件的简化版本：

HTML：

<div cdkDropList>
<div cdkDrag 
 (cdkDragStarted)="onCdkDragStarted($event)"
 *ngFor="let step of steps">Step: {{step.id}}  {{step.text}}</div>
</div>

代码：

import { ChangeDetectorRef, Component} from '@angular/core';

@Component({
  selector: 'drag-poc',
  templateUrl: 'drag-poc.component.html',
  styles: []
})
export class DragPocComponent { 
  steps: any[] = [
    { id: 1, text: '' },
    { id: 2, text: '' },
    { id: 3, text: '' },
    { id: 4, text: '' },
    { id: 5, text: '' },
  ];

  constructor(private ref: ChangeDetectorRef){

  }

  onCdkDragStarted($event){
    // this is just a hack to get a reference to the array object that is being dragged
    const draggedItem = $event.source.__ngContext__[8].ngForOf[$event.source.__ngContext__[8].index];

    draggedItem.text = "MOVED";
    this.ref.detectChanges();
  }
}

使用 Angular 9，一旦开始拖动，UI 就会更新：

使用 Angular 12（或 13），代码完全相同，但 UI 不同t 更新，直到拖动的项目被删除：

有没有办法让 UI 在拖动开始后更新？

Stackblitz Angular 9：https://stackblitz.com/edit/angular-ivy-s4pmmm

StackBlitz 最新 Angular：https://stackblitz.com/edit/angular-ivy-ztdufb

的答案后显示问题

编辑：最新的 Angular StackBlitz 已更新，以在 @Eliseo

Answer 1

恐怕您需要创建一个 *cdkDragPreview。还有一个 cdkDrag 它有点？@X##??!!因为您需要考虑几件事：拖动的大小、拖动元素时的点...

为了考虑所有这些，我通常创建两个变量

  style: any = null;
  offset:any=null

并且 cdkDrag 使用 (cdkDragMoved) 和 (mousedown) -您还需要使用 (cdkDragStarted) 和可能的 (cdkDragEnded) 所以你的 .html 变得像

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let movie of movies;let i=index" cdkDrag 
    [cdkDragData]="movie"
    (cdkDragStarted)="onDragStarted($event,i)"
    (cdkDragMoved)="onDragMove($event)"
    (cdkDragEnded)="onDragEnded($event,i)"
    
     (mousedown)="setStyle($event)" >{{movie.title}}{{movie.text}}
      <div  *cdkDragPreview class="example-box" [ngStyle]="style">
        {{movie.title}}{{movie.text}}
      </div>
    </div>
  </div>

和 .ts

  drop(event: CdkDragDrop<any[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }
  onDragStarted(event:CdkDragStart<any>,index:number)
  {
      //you can use
      this.movies[index].text="moved"
      //or use
      event.source.data.text="moving...."

  }
  onDragEnded(event:CdkDragEnd<any>,index:number)
  {
    this.movies[index].text=""
  }
  setStyle(event: MouseEvent) {
    const rect = (event.target as HTMLElement).getBoundingClientRect();
    this.style = { width: rect.width + 'px', height: rect.height + 'px'}
    this.offset={x:event.offsetX,y:event.offsetY };
  }
  public onDragMove(event: CdkDragMove<any>): void {
    const el=(document.getElementsByClassName('cdk-drag-preview')[0])as any
    const xPos = event.pointerPosition.x - this.offset.x;
    const yPos = event.pointerPosition.y - this.offset.y;
    el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
  }

请参阅 stackblitz 我如何传递“索引”到函数 (onDragStarted) 和 (onDragEnded) 来更改“对象”数组（您不需要使用像您的复杂的$event.source.__ngContext__[8].ngForOf[$eve....

注意：您还可以检查属性 event.source 或 event.source.element 来获取 HTML 元素，您可以还将属性 cdkDragData 添加到您的 Drag