自定義組件 animation 在 Angular 9 + CDK`on 拖放時不起作用

Question

我正在嘗試創建一個用戶可以重新排序項目的列表，使用@angular/cdk/drag-drop 並按照官方文檔中的示例（ https://material.angular.io/cdk/drag -刪除/概述）。

我的示例確實有效，它可以在拖放時重新排序列表，但 animation 不適用於自定義組件，我的意思是，列表容器和列表項是自定義組件，如您在 Stackblitz 中所見：

https://stackblitz.com/edit/angular-ivy-kl3vgd

如何使動畫像 Angular“拖放排序”示例中一樣工作？

提前致謝，

Answer 1

我認為如果您將組件放在可拖動的 object 的div中，內置動畫應該可以工作

<div *ngFor="let file of files" cdkDrag>
    <app-upload-item>
        {{file}}
    </app-upload-item>
</div>