[英]Angular Material drag drop CDK - drop single element(independent) into a list
[英]Trying to clear Angular 8 CDK Drag and Drop List
我正在使用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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.