Angular2：从列表动画中删除元素

Question

我有一张带有卡片（任务）的简单列表（任务）。当我删除任务时，将显示确认对话框。如果用户确认删除，则进行http呼叫。如果成功，则将isDeleted变量设置为true并发送到列表项以切换类。在这里我遇到一些问题：

1. 如果我单击一个项目并且不删除它（确认后，我选择“否”），然后单击另一个项目并将其删除-这两个项目都获得了该类（为什么？ID不同）。

   <div class="vb-task-card" [ngClass]="{'vb-deleted': task.id === selectedItemId && isDeleted}">
     // here comes the rest of the layout
      <button (click)="onDeleteTask(task)"> DELETE</button>
   </div>
   

如果用户单击按钮，则会调用以下功能：

    public onDeleteTask(task) {
       this.selectedItemId = task.id;
       this.deleteTask.emit(task);
    }

2. 如何在我删除的项目中添加淡出动画？

ps，如果您需要更多代码或完整代码-告诉我！

提前致谢！

Answer 1

所以，我已经弄清楚了。isDeleted在* ngFor中的所有元素上设置。您应该在对象上拥有一个属性，如下所示：task.deleted = true并使用该属性。

关于动画，我遵循官方文档。

这是我的代码：

import {Component, Input, Output, EventEmitter,
    trigger,
    state,
    style,
    transition,
    animate} from "@angular/core";

@Component({
selector: "vb-tasks-item",
animations: [
    trigger('taskState', [
        state('inactive', style({opacity: 1, transform: 'translateX(0) scale(1)'})),
        state('active',   style({opacity: 1, transform: 'translateX(0) scale(1)'})),
        state('void',   style({opacity: 0, display: 'none', transform: 'translateX(0) scale(1)'})),
        transition('* => void', [
            animate('1s 8 ease-out', style({
                opacity: 0,
                transform: 'translateX(0) scale(0.5)'
            }))
        ])
    ])
],
template: `
<div class="vb-task-card" @taskState="task.deleted">
</div>`

export class TasksItemComponent {
   @Input() public task: TaskSummary;

   @Output() public deleteTask = new EventEmitter();

   public onDeleteTask(task) {
      task.deleted = (task.deleted === 'active' ? 'inactive' : 'active');
      this.deleteTask.emit(task);
   }

}

如果用户确认删除，我将设置动画状态（task.deleted）：

public onDeleteModal(isOk) {
    this.isModalOpen = isOk;
    if(isOk) {
        this.tasksSandbox.deleteTask(this.taskToDelete.id)
            .subscribe(res => {
                if (res) {
                    this.taskToDelete.deleted = 'void';
                    this.isModalOpen = !isOk;
                }
            });
    }else{
        this.taskToDelete.deleted = 'inactive';
    }
}