从下拉列表中删除最新项目

Question

我正在研究 angular 拖放。我的代码如下

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

我正在删除的项目将始终在完成列表的末尾删除。我想在最新删除的项目上有一个“X”标记（假设用户拖放 item1 那么“X”应该在 items1 上，如果用户拖放 item2 那么“X”应该只在 item2 上）这样如果用户希望用户可以单击“X”并将项目从完成列表中删除并再次返回“待办事项”列表。

Answer 1

我已经做了修改。所以我在这里粘贴 HTML 和 TS 代码。我不确定代码是否保存在 stackblitz 上。

在组件文件中 cdk-drag-drop-connected-sorting-example.ts:

import { Component, OnInit } from "@angular/core";
import {
  CdkDragDrop,
  moveItemInArray,
  transferArrayItem
} from "@angular/cdk/drag-drop";

/**
 * @title Drag&Drop connected sorting
 */
@Component({
  selector: "cdk-drag-drop-connected-sorting-example",
  templateUrl: "cdk-drag-drop-connected-sorting-example.html",
  styleUrls: ["cdk-drag-drop-connected-sorting-example.css"]
})
export class CdkDragDropConnectedSortingExample  implements OnInit{
  todo = [
    "Get to work",
    "Pick up groceries",
    "Go home",
    "Fall asleep",
    "Walk Dog",
    "Stretch",
    "Code Stuff",
    "Drag Stuff",
    "Drop Stuff",
    "Run",
    "Walk"
  ];




  done = ["Get up", "Brush teeth", "Take a shower", "Check e-mail", "Walk dog"];

  public DroppedListLength;  // tracking the length of the list


ngOnInit() {
  this.DroppedListLength = this.done.length;
}

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      console.log("first if..");
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        this.done.length
      );
      console.log("second if..");
      this.DroppedListLength = this.done.length; // update the list length for any drop
    }
  }
// just add a function to remove the last added value
  removeLastDroppedItem() {
    this.done.pop();
this.DroppedListLength = this.done.length; // you can add this to keep track of last item in the list
  }
}

在htmlcdk-drag-drop-connected-sorting-example.html中只需要添加一个按钮，并将其点击关联到上述功能即可：

<div class="example-container">
    <h2>To do</h2>

    <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList]" class="example-list"
     (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
    </div>
</div>
<br>
<div class="example-container">
    <h2>Done</h2>

    <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]" class="example-list"
     (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of done; let i = index" cdkDrag>{{item}}
      <span *ngIf="i+1 === DroppedListLength" (click)="removeLastDroppedItem()">X</span></div>
    </div>
</div>

注意：您可以更新这些文件，它应该会按预期工作。

Answer 2

目标是存储最后一个元素的索引，然后在模板中应用逻辑 Solution

从下拉列表中删除最新项目

Removing latest item from drop list

drag-and-drop

angular

angular8

angular9

angular10