要解决Angular表单数组名称无法显示拖放的问题,你可以按照以下步骤进行操作:
cdkDropList
指令将其标记为可接受拖放的区域:
{{ item }}
items
来保存要显示的项目。在ngOnInit
生命周期钩子中初始化该数组:import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
items: string[] = [];
ngOnInit() {
this.items = ['Item 1', 'Item 2', 'Item 3'];
}
onDrop(event: any) {
// 处理拖放事件
}
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating.cdk-drag-animating-rtl {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1),
right 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drag-animating.cdk-drag-animating-ltr {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1),
left 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drag-animating.cdk-drag-animating-rtl.cdk-drag-animating-noop-transitions {
transition: none;
right: 0;
}
.cdk-drag-animating.cdk-drag-animating-ltr.cdk-drag-animating-noop-transitions {
transition: none;
left: 0;
}
通过按照上述步骤进行操作,你应该能够解决Angular表单数组名称无法显示拖放的问题。
下一篇:Angular表单数组模型