Angularfire 从查找列表中删除对象
Angularfire delete object from lookup list
(我对 Angular 很陌生,对编码也很陌生,所以如果我的问题看起来不是很清楚,请原谅我。)
我有项目和任务列表。我可以将任务添加到项目中并在项目组件内的 table 中迭代它们(通过使用非规范化查找 table)。但是我无法弄清楚如何使用在 projectTasks table 的每一行中迭代的按钮将它们从项目中删除。
Plnkr:http://plnkr.co/edit/BSAYL6PfLLCQ7xXWIo2N?p=info
项目界面:
export interface Project {
$key: string;
name: string;
projectTasks: {
[key: string]: {
name: string;
assignedTo?: string;
dueDate?: String;
estTime?: String;
}
};}
任务界面:
export interface Task {
$key: string;
name: string;
assignedTo?: string;
dueDate?: string;
estTime?: string; }
添加任务功能:
//(selectedTask: Task, projectTasks = [];)
addTask() {
this.project.projectTasks[this.selectedTask.$key] = {
name: this.selectedTask.name,
assignedTo: this.selectedTask.assignedTo ? this.selectedTask.assignedTo : 'N/A',
dueDate: this.selectedTask.dueDate ? this.selectedTask.dueDate : 'N/A' ,
estTime: this.selectedTask.estTime ? this.selectedTask.estTime : 'N/A' ,
};
this.setProjectTasks();
设置项目任务函数:
setProjectTasks() {
if (this.project.projectTasks == null) {
this.project.projectTasks = {};
}
this.projectTasks = Object.keys(this.project.projectTasks)
.map(key => this.project.projectTasks[key]);
}
删除任务函数:(删除整个任务节点)
removeTask(task) {
this.taskService.removeTask(task)
.then(_ => this.router.navigate([`ww/task-list`]) );
}
任务服务删除任务:
removeTask(task) {
return this
.tasks$
.remove(task.$key)
.then(_ => alert('Task Successfully Deleted'))
.catch(error => console.log(error));
我可以在下拉列表中重复分配的任务,如图所示,我需要找到一个逻辑来使用“删除”按钮将 addedTask 更新为空值,而不必删除实际的任务节点。
<div class="form-group row">
<label for="remove-row">Remove Tasks From Project</label>
<md-select placeholder="Select a Task" [(ngModel)]="selectedTask">
<md-option *ngFor="let projectTask of projectTasks" [value]="projectTask">
{{projectTask.name}} </md-option>
</md-select>
<button class="btn btn-primary"
(click)="removeProjectTask(projectTask)">Remove From Project</button>
以下解决方案可用于从查找中删除对象 table。
removeProjectTask(taskName: string) {
const taskKey = Object.keys(this.project.projectTasks)
.find(key => {return this.project.projectTasks[key]
.name === this.selectedTask.name ;});
delete this.project.projectTasks[taskKey];
this.setProjectTasks();
}
(我对 Angular 很陌生,对编码也很陌生,所以如果我的问题看起来不是很清楚,请原谅我。)
我有项目和任务列表。我可以将任务添加到项目中并在项目组件内的 table 中迭代它们(通过使用非规范化查找 table)。但是我无法弄清楚如何使用在 projectTasks table 的每一行中迭代的按钮将它们从项目中删除。
Plnkr:http://plnkr.co/edit/BSAYL6PfLLCQ7xXWIo2N?p=info
项目界面:
export interface Project {
$key: string;
name: string;
projectTasks: {
[key: string]: {
name: string;
assignedTo?: string;
dueDate?: String;
estTime?: String;
}
};}
任务界面:
export interface Task {
$key: string;
name: string;
assignedTo?: string;
dueDate?: string;
estTime?: string; }
添加任务功能:
//(selectedTask: Task, projectTasks = [];)
addTask() {
this.project.projectTasks[this.selectedTask.$key] = {
name: this.selectedTask.name,
assignedTo: this.selectedTask.assignedTo ? this.selectedTask.assignedTo : 'N/A',
dueDate: this.selectedTask.dueDate ? this.selectedTask.dueDate : 'N/A' ,
estTime: this.selectedTask.estTime ? this.selectedTask.estTime : 'N/A' ,
};
this.setProjectTasks();
设置项目任务函数:
setProjectTasks() {
if (this.project.projectTasks == null) {
this.project.projectTasks = {};
}
this.projectTasks = Object.keys(this.project.projectTasks)
.map(key => this.project.projectTasks[key]);
}
删除任务函数:(删除整个任务节点)
removeTask(task) {
this.taskService.removeTask(task)
.then(_ => this.router.navigate([`ww/task-list`]) );
}
任务服务删除任务:
removeTask(task) {
return this
.tasks$
.remove(task.$key)
.then(_ => alert('Task Successfully Deleted'))
.catch(error => console.log(error));
我可以在下拉列表中重复分配的任务,如图所示,我需要找到一个逻辑来使用“删除”按钮将 addedTask 更新为空值,而不必删除实际的任务节点。
<div class="form-group row">
<label for="remove-row">Remove Tasks From Project</label>
<md-select placeholder="Select a Task" [(ngModel)]="selectedTask">
<md-option *ngFor="let projectTask of projectTasks" [value]="projectTask">
{{projectTask.name}} </md-option>
</md-select>
<button class="btn btn-primary"
(click)="removeProjectTask(projectTask)">Remove From Project</button>
以下解决方案可用于从查找中删除对象 table。
removeProjectTask(taskName: string) {
const taskKey = Object.keys(this.project.projectTasks)
.find(key => {return this.project.projectTasks[key]
.name === this.selectedTask.name ;});
delete this.project.projectTasks[taskKey];
this.setProjectTasks();
}