Angular2: Löschen Element aus der Liste Animation

Question

Ich habe einfache Liste (Aufgaben) mit Karten (Task). Wenn ich eine Aufgabe lösche, wird der Bestätigungsdialog aufgerufen. Wenn der Benutzer den Löschvorgang bestätigt, wird ein HTTP-Aufruf durchgeführt. Wenn es eine erfolgreiche Variable ist, wird isDeleted auf true gesetzt und an das Listenelement zum Umschalten einer Klasse gesendet. Hier treffe ich einige Probleme:

1. Wenn ich auf ein Element klicken und löschen Sie es (auf Bestätigung ich ‚Nein‘ wählen) und dann auf ein anderes Element I klicken und löschen - diese beiden Elemente erhalten die Klasse (warum? die IDs sind anders).

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

Wenn der Benutzer auf die Schaltfläche klickt folgende Funktion aufgerufen wird:

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

2. Wie füge ich Animation auf den Punkt verblassen ich löschen?

p.s. Wenn Sie mehr Code oder vollständigen Code benötigen, lassen Sie es mich wissen!

Vielen Dank im Voraus!

Answer 1

Also habe ich das herausgefunden. isDeleted ist für alle Elemente in * ngFor gesetzt. Sie sollten eine Eigenschaft auf Ihrem Objekt haben, so: task.deleted = true und damit arbeiten.

Was ist mit Animationen, ich folgte official documentation.

Hier ist mein Code:

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

} 

ich die Animation Zustand Einstellung (task.deleted), wenn der Benutzer Löschung bestätigt:

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'; 
    } 
}