我需要使用Angular和Google Anular Material库编写一个简单的任务板,它将每秒将项目从一个列表移到另一个列表。逐一。 我知道如何由用户实现手动拖放,但是可以使用Angular Material自动执行相同的操作吗?
我有一个简单的任务板,其中包含三个代表任务列表的容器。我可以手动拖动它们。
我想让页面自动每秒一次从列表中拖放项目。我创建了一个教育模拟,并想演示任务板在一段时间内的工作方式
这是单个任务清单的摘录:
<div
cdkDropList
#analizeList="cdkDropList"
[cdkDropListData]="Taskboard"
[cdkDropListConnectedTo]="[inprogressList]"
class="example-list"
(cdkDropListDropped)="drop($event, 1)">
<div *ngFor="let item of Taskboard | callback: 'phase': 1" cdkDrag>
{{item.name}}: {{item.plannedeffort}}h
<mat-progress-bar
class="progressbar"
[color]="primary"
[mode]="determinate"
[value]="item.accomplishedeffort*100/item.plannedeffort"
[bufferValue]="50">
</mat-progress-bar>
{{item.value}}$
</div>
</div>
我有3个这样的列表,分别称为Analizelist,Inprogresslist和Testlist。
方法drop()的定义方式如下:
drop(event: CdkDragDrop<string[]>, i: number) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
if (i==1) {
this.startTask(event.previousIndex, i);
} else {
let nr = this.getTaskbyIndex(event.previousIndex,i);
if (i<=3) {
this.startTask(nr, i);
} else {
this.finishTask(nr);
}
}
}
}