Попытка очистить список перетаскивания 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 (), чтобы вернуть элементы в исходное положение, но все же столкнулся с проблемой незнания, как получить доступ к информации об элементах в массиве «done».

Также стоит отметить, что я впервые изучаю Angular, списки «todo» и «done» были созданы автоматически, и я планирую изменить имена, когда у меня заработает функциональность.


person birchplease    schedule 16.09.2019    source источник


Ответы (1)


  exit() {
    this.todo = [...this.todo, ...this.done];
    this.done = [];
  }

https://stackblitz.com/edit/angular-avfyze?file=app/cdk-drag-drop-connected-sorting-example.ts

person Hsuan Lee    schedule 16.09.2019
comment
Работал у меня. Вы спасатель, большое вам спасибо. - person birchplease; 16.09.2019
comment
@birchпожалуйста, примите ответ :) stackoverflow.com/help/someone-answers - person Richard Lovell; 16.09.2019