要使用Angular CDK拖放来创建一个常量长度的列表,可以按照以下步骤进行:
npm install @angular/cdk
DragDropModule
:import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
imports: [
// other modules
DragDropModule
],
// other configurations
})
export class AppModule { }
{{ item }}
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
export class MyComponent {
items: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
onDrop(event: CdkDragDrop) {
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}
}
.list-container {
height: 300px;
overflow-y: scroll;
}
.list-item {
padding: 10px;
background-color: #f0f0f0;
margin-bottom: 10px;
}
这样就可以使用Angular CDK拖放创建一个常量长度的列表了。在这个示例中,列表容器有一个固定的高度并带有滚动条,列表项可以通过拖放重新排序。