Question

（我对Angular很新，对编码很新，所以如果我的问题看起来不那么明亮，请原谅我。）

我有项目和任务作为列表。我可以将任务添加到项目中，并在项目组件内的表中迭代它们（通过使用非规范化查找表）。但我无法弄清楚如何使用在projectTasks表中每行迭代的按钮从项目中删除它们。

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的null值，而不必删除实际的任务节点。

<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>

Answer 1

以下解决方案已用于从查找表中删除对象。

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();
}

Angularfire从查找列表中删除对象

1 个答案: