angular - 试图清除 Angular 8 CDK 拖放列表
问题描述
我正在使用 Angular 制作一个简单的拖放列表,但不知道如何将表格重置为它们的起始排列。我试图使用 transferArrayItem 但我不知道如何引用表来访问列表中的项目。
<div class="container">
<h2>Groceries</h2>
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo"
[cdkDropListConnectedTo]="doneList" class="list" (cdkDropListDropped)="drop($event)">
<div class="list-item" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>
</div>
<div class="container">
<h2>Cart</h2>
<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done"
[cdkDropListConnectedTo]="todoList" class="list" (cdkDropListDropped)="drop($event)">
<div class="list-item" *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>
</div>
<div id="buttons">
<button id="clearCart" (click)="clearCart()">Clear Cart</button>
<button id="checkout" (click)="checkout()">Checkout</button>
</div>
这是我的“groceries.component.html”文件,列表所在的位置和定义。下面是我运行函数的“groceries.component.ts”文件。
import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-groceries',
templateUrl: './groceries.component.html',
styleUrls: ['./groceries.component.css'],
})
export class GroceriesComponent {
todo = [
'Apple',
'Banana',
'Avocado',
'Cheez-Its',
'Doritos',
'Gushers',
'Orange',
'Big ol steaks'
];
done = [
];
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
clearCart(){
window.alert("Cart has been cleared!");
}
exit(){
}
checkout(){
window.alert("Don't worry about paying, we'll ship them right now!");
}
}
我打算使用 exit() 方法将元素重置回原始位置,但仍然遇到不知道如何访问“完成”数组中项目信息的问题。
另外值得注意的是,我第一次探索 Angular,“todo”和“done”列表是自动生成的,我计划在功能正常工作时更改名称。
解决方案
exit() {
this.todo = [...this.todo, ...this.done];
this.done = [];
}
https://stackblitz.com/edit/angular-avfyze?file=app/cdk-drag-drop-connected-sorting-example.ts
推荐阅读
- mysql - MySQL Workbench 无法导出数据
- java - 如何使用 Spring Boot 在模板化的 excel 文件中附加 JSON 数据?
- domain-driven-design - 处理跨聚合关系和聚合状态中的事件
- c# - 在带有 .json 的控制器 Web api Uri 中找不到资源
- javascript - 为什么 Angular 项目中没有 Angular-CLI 为“模型”生成命令?
- sql-server - 连接 Azure SQL 数据库上的其他 SQL 数据库
- raml - RAML 1.0:在可选对象中定义 minProperties
- ios - 在 Swift 4 中调用 collectionView(_ :layout:sizeForItemAt:)
- xamarin - 在适用于 Android 和 iOS 的 Xamarin.Forms 中发送带附件的电子邮件
- angular - 将对象数组转换为单个字符串并将其推入同一数组