使用Angular和dotNet core进行拖放

我使用Angular+Dotnet core 3.1创建了一个页面，用于管理不同用户的任务。我已经为此使用了拖放功能。我有两个任务列表1）未分配的任务2）已分配的任务。我可以将任务从已分配的任务列表拖放到未分配的任务列表，并且工作正常。但是，如果我拖动以前未分配给任何用户的任务，并将其拖放以分配给该用户，则该任务将从未分配列表中删除，但不会显示在用户分配列表中

下面是我的代码：

assign-task.component.html

<div cdkDropListGroup>
  <div class="example-container">
    <h2>Task List</h2>

    <div cdkDropList
         [cdkDropListData]="arrUnAssignTaskList"
         class="example-list"
         (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of arrUnAssignTaskList" cdkDrag>{{item.sTaskName}}</div>
    </div>
  </div>

  <div class="example-container">
    <h2>User Assigned Task</h2>
    <div class="d-flex">
      <div class="mr-4">User Name</div>
      <div>Task Assigned</div>
    </div>
    <div>
      <div *ngFor="let user of arrUserList">
        <div>
          {{user.sUserName}}
        </div>
        <div cdkDropList
             [cdkDropListData]="arrAssignedTaskList"
             class="example-list"
             (cdkDropListDropped)="drop($event)">
          <div *ngFor="let item of arrAssignedTaskList">
            <ng-template [ngIf]="item.iUserId == user.iUserId">
              <div class="example-box" cdkDrag>{{item.sTaskName}}</div>
            </ng-template>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div cdkDropListGroup>
  <div class="example-container">
    <h2>Task List</h2>

    <div cdkDropList
         [cdkDropListData]="arrUnAssignTaskList"
         class="example-list"
         (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of arrUnAssignTaskList" cdkDrag>{{item.sTaskName}}</div>
    </div>
  </div>

  <div class="example-container">
    <h2>User Assigned Task</h2>
    <div class="d-flex">
      <div class="mr-4">User Name</div>
      <div>Task Assigned</div>
    </div>
    <div>
      <div *ngFor="let user of arrUserList">
        <div>
          {{user.sUserName}}
        </div>
        <div cdkDropList
             [cdkDropListData]="arrAssignedTaskList"
             class="example-list"
             (cdkDropListDropped)="drop($event)" id="cdk-drop-list-{{user.iUserId}}"><!-- Added dynamic id -->
          <div *ngFor="let item of arrAssignedTaskList" cdkDrag><!-- Added cdkDrag -->
            <ng-template [ngIf]="item.iUserId == user.iUserId">
              <div class="example-box>{{item.sTaskName}}</div><!-- Removed cdkDrag -->
            </ng-template>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

以下是页面布局/设计

示例/问题： 如果我拖放“任务8”（或任何未分配的任务）并尝试将其分配给“User1”，则它将从未分配的任务列表中删除，但不会显示在“User1”任务列表下

我的代码中有什么遗漏的吗？或者我是否遗漏了任何配置/步骤

---

谢谢

在花了很多天的时间之后，我通过在代码中应用以下更改获得了预期的输出：

assign-task.component.html

<div cdkDropListGroup>
  <div class="example-container">
    <h2>Task List</h2>

    <div cdkDropList
         [cdkDropListData]="arrUnAssignTaskList"
         class="example-list"
         (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of arrUnAssignTaskList" cdkDrag>{{item.sTaskName}}</div>
    </div>
  </div>

  <div class="example-container">
    <h2>User Assigned Task</h2>
    <div class="d-flex">
      <div class="mr-4">User Name</div>
      <div>Task Assigned</div>
    </div>
    <div>
      <div *ngFor="let user of arrUserList">
        <div>
          {{user.sUserName}}
        </div>
        <div cdkDropList
             [cdkDropListData]="arrAssignedTaskList"
             class="example-list"
             (cdkDropListDropped)="drop($event)">
          <div *ngFor="let item of arrAssignedTaskList">
            <ng-template [ngIf]="item.iUserId == user.iUserId">
              <div class="example-box" cdkDrag>{{item.sTaskName}}</div>
            </ng-template>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div cdkDropListGroup>
  <div class="example-container">
    <h2>Task List</h2>

    <div cdkDropList
         [cdkDropListData]="arrUnAssignTaskList"
         class="example-list"
         (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of arrUnAssignTaskList" cdkDrag>{{item.sTaskName}}</div>
    </div>
  </div>

  <div class="example-container">
    <h2>User Assigned Task</h2>
    <div class="d-flex">
      <div class="mr-4">User Name</div>
      <div>Task Assigned</div>
    </div>
    <div>
      <div *ngFor="let user of arrUserList">
        <div>
          {{user.sUserName}}
        </div>
        <div cdkDropList
             [cdkDropListData]="arrAssignedTaskList"
             class="example-list"
             (cdkDropListDropped)="drop($event)" id="cdk-drop-list-{{user.iUserId}}"><!-- Added dynamic id -->
          <div *ngFor="let item of arrAssignedTaskList" cdkDrag><!-- Added cdkDrag -->
            <ng-template [ngIf]="item.iUserId == user.iUserId">
              <div class="example-box>{{item.sTaskName}}</div><!-- Removed cdkDrag -->
            </ng-template>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

任务列表
{{item.sTaskName}
用户分配的任务
用户名
分配的任务
{{user.sUserName}
import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

export interface UserList {
  iUserId: number;
  sUserName: string;
}

export interface TaskList {
  iTaskId: number;
  sTaskName: string;
  iUserId: number; //Added
}

export interface AssignedTaskList {
  iTaskId: number;
  sTaskName: string;
  iUserId: number;
}

@Component({
  selector: 'app-assign-task-component',
  templateUrl: './assign-task.component.html',
  styleUrls: ['./assign-task.css'],
})
export class AssignTaskComponent {
  arrUserList: UserList[] = [
    { iUserId: 1, sUserName: 'User1' },
    { iUserId: 2, sUserName: 'User2' },
    { iUserId: 3, sUserName: 'User3' },
    { iUserId: 4, sUserName: 'User4' }
  ];

  /* Set zero for user id - unassinged task */
  arrUnAssignTaskList: TaskList[] = [
    { iTaskId: 2, sTaskName: 'Task2', iUserId: 0 },
    { iTaskId: 4, sTaskName: 'Task4', iUserId: 0 },
    { iTaskId: 6, sTaskName: 'Task6', iUserId: 0 },
    { iTaskId: 8, sTaskName: 'Task8', iUserId: 0 },
    { iTaskId: 9, sTaskName: 'Task9', iUserId: 0 }
  ];

  arrAssignedTaskList: AssignedTaskList[] = [
    { iTaskId: 1, sTaskName: 'Task1', iUserId: 1 },
    { iTaskId: 3, sTaskName: 'Task3', iUserId: 2 },
    { iTaskId: 5, sTaskName: 'Task5', iUserId: 3 },
    { iTaskId: 7, sTaskName: 'Task7', iUserId: 4 },
  ];

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
/* ======================Added below code====================== */
      /* Checked if task drag and moved to Unassign list */
      if (event.container.id === 'cdk-drop-list-0') {
        this.arrUnAssignTaskList[event.currentIndex].iUserId = 0;
      }
      /* Checked if task drag and moved to Assign list */
      else if (event.previousContainer.id === 'cdk-drop-list-0') {
        if (this.arrAssignedTaskList[event.currentIndex] === undefined) {
          var arrEmployeeID = event.container.id.split("-");
          this.arrUnAssignTaskList[event.previousIndex].iUserId = Number(arrEmployeeID[3]);
        }
        else {
          this.arrUnAssignTaskList[event.previousIndex].iUserId = this.arrAssignedTaskList[event.currentIndex].iUserId;
        }
      }
      else {
        /* Task drag and moved to within Assign list */
        this.arrAssignedTaskList[event.previousIndex].iUserId = this.arrAssignedTaskList[event.currentIndex].iUserId;
      }
/* ============================================================ */
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }
}