I am having trouble with a todo list. I have an array of tasks, when a task is checked it has to show a title ‘Finished tasks’ and the task checked has to move to the bottom to finished tasks and have a line through it, if unchecked, it moves back to the top. To solution this I need to use Pipes, however, I am having a hell of a time and can’t work it out as the tasks are always duplicated when I add the pipe, so obviously I am adding it wrong.
home.html
<ion-list>
<ion-item-sliding *ngFor='let tarea of servicio.tareas | sort'><ion-item ><ion-checkbox color="dark" checked='false' (click)='checked(tarea)'></ion-checkbox>
<div id="padding"><b>{{tarea.nombre}}</b></div>
</ion-item>
<ion-item-options side="end">
<button ion-button color="primary" (click)="editar(tarea.nombre, index)" >
<ion-icon name="text"></ion-icon>
EDITAR
</button>
<button ion-button color="secondary" (click)="eliminar(tarea)">
<ion-icon name="call"></ion-icon>
BORRAR
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-list>
<label \\\*ngIf='(servicio.tareas | filter).length > 0'>Tareas terminadas</label>
</ion-list>
As you can see, I have the original sliding list with the pipe that sorts from important to non important, which works fine, then I have the finished tasks lavel which will appear when the length of the filter pipe is more than 1.
**Here is the filterPipe:**
`Pipe({name: 'filter'})export class FilterPipe implements PipeTransform {transform(tarea1: Tareas[]) {return tarea1.filter(tarea2 => tarea2.finalizada); }}`
This is the last thing I need to do and it is literally driving me mad.1 post - 1 participant