使用 Angular 和 dotNet 核心进行拖放
我使用 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>
assign-task.component.ts
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;
}
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' }
];
arrUnAssignTaskList: TaskList[] = [
{ iTaskId: 2, sTaskName: 'Task2' },
{ iTaskId: 4, sTaskName: 'Task4' },
{ iTaskId: 6, sTaskName: 'Task6' },
{ iTaskId: 8, sTaskName: 'Task8' },
{ iTaskId: 9, sTaskName: 'Task9' }
];
arrAssignedTaskList: AssignedTaskList[] = [
{ iTaskId: 1, sTaskName: 'Task1', iUserId: 1 },
{ iTaskId: 3, sTaskName: 'Task3', iUserId: 1 },
{ 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 {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
}
package.json
{
"name": "userTask",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:ssr": "ng run userTask:server:dev",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "8.2.12",
"@angular/cdk": "~8.2.3",
"@angular/common": "8.2.12",
"@angular/compiler": "8.2.12",
"@angular/core": "~8.2.14",
"@angular/forms": "8.2.12",
"@angular/material": "~8.2.3",
"@angular/platform-browser": "8.2.12",
"@angular/platform-browser-dynamic": "8.2.12",
"@angular/platform-server": "8.2.12",
"@angular/router": "8.2.12",
"@nguniversal/module-map-ngfactory-loader": "8.1.1",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.3.1",
"core-js": "^3.3.3",
"jquery": "3.4.1",
"oidc-client": "^1.9.1",
"popper.js": "^1.16.0",
"rxjs": "^6.5.3",
"save": "^2.4.0",
"zone.js": "0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.26",
"@angular/cli": "^8.3.26",
"@angular/compiler-cli": "^8.2.14",
"@angular/language-service": "^8.2.12",
"@types/jasmine": "~3.4.4",
"@types/jasminewd2": "~2.0.8",
"@types/node": "~12.11.6",
"codelyzer": "^5.2.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^5.0.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"typescript": "3.5.3"
},
"optionalDependencies": {
"node-sass": "^4.12.0",
"protractor": "~5.4.2",
"ts-node": "~8.4.1",
"tslint": "~5.20.0"
}
}
以下是页面布局/设计
示例/问题： 如果我拖放“任务 8”（或任何未分配的任务）并尝试将其分配给“用户 1”，则它将从“未分配的任务”列表中删除，但不会显示在“用户 1”任务列表下
我的代码中是否遗漏了什么？还是我遗漏了任何配置/步骤？
谢谢
1 个答案:
答案 0 :(得分：3)
在花了很多天之后，通过在我的代码中应用以下更改，我获得了预期的输出：
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)" 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>
assign-task.component.ts
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);
}
}
}
我已经添加了两个文件的完整代码，并在代码更改的地方添加了注释。
感谢大家的帮助和支持。可能会帮助某人。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？