你可以使用Angular Material的Drag and Drop功能和CDK(Component Dev Kit)来实现在cdk组件外部onDrop时移除项目。下面是一个示例代码:
首先,你需要在app.module.ts中导入DragDropModule:
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
imports: [
// other imports
DragDropModule
],
// other configurations
})
export class AppModule { }
然后,在你的组件的模板文件中,你可以使用cdkDropList和cdkDrag指令来设置拖放区域和可拖动的项目。在拖放区域中,你可以使用cdkDropListDropped事件来捕获项目被放置的事件。在这个事件中,你可以获取到被拖放的项目的数据,并在外部进行相应的操作。
{{ item }}
在组件的代码中,你可以实现onDrop方法来处理拖放事件。在这个方法中,你可以从event对象中获取到被拖放的项目的数据,并在外部进行相应的操作,比如从数组中移除项目。
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
// component configurations
})
export class YourComponent {
items = ['Item 1', 'Item 2', 'Item 3'];
onDrop(event: CdkDragDrop) {
const itemIndex = event.previousIndex;
const itemData = event.item.data;
// 在这里根据需要进行相应的操作,比如从数组中移除项目
this.items.splice(itemIndex, 1);
}
}
这样,当你将项目拖放到cdkDropList区域之外时,会触发onDrop方法,并从数组中移除项目。
希望以上示例代码对你有帮助!
上一篇:Angular Material: 有时实时更新Mat Table,有时不更新
下一篇:Angular Material: 在 mat-checkbox 和 mat-radio 被选中时改变标签文本的颜色