如何使用管道过滤到 Ionic 中的两个列表

Question

我在处理待办事项列表时遇到了问题。我有一系列任务，当一个任务被选中时，它必须显示一个标题“已完成的任务”，并且选中的任务必须移动到底部以完成任务并有一条线穿过它，如果未选中，它会移回最佳。为了解决这个问题，我需要使用 Pipes，但是，我有一段时间无法解决，因为添加管道时任务总是重复的，所以显然我添加错了。 主页.html

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

正如你所看到的，我有一个从重要到不重要排序的管道的原始滑动列表，它工作正常，然后我有完成的任务 lavel，当过滤管道的长度超过 1 时会出现.

这是过滤器管道：

  name: 'filter'
})

export class FilterPipe implements PipeTransform {
     transform(tarea1: Tareas[]) {
      return tarea1.filter(tarea2 => tarea2.finalizada);  
}
}

这应该是结果，当一个任务被标记时，它会在下面显示完成的任务和完成的结果，当不选中时，它会回到顶部。

List with finished tasks showing

这是我需要做的最后一件事，它真的让我发疯了。

Answer 1

您似乎在变异对象时遇到了麻烦。默认情况下，如果您只是切换列表对象之一的属性之一的值，则不会再次执行排序管道：

const tarefas = [
  {
     id: 't1',
     finalizada: false,
  },
  {
     id: 't2',
     finalizada: true,
  }
];

在上面的代码中，如果您执行tarefas[0].finalizada = true（或随机tarefas[index] 的任何属性的任何其他更改），排序管道将不会再次运行。

您可以在管道中添加一个参数：pure: false。然后它将跟踪数组中对象的更改：

@Pipe({
  name: 'sort',
  pure: false
})
export class SortPipe...

作为替代方案，您可以在更改对象属性值时更改 tarefas 对象的引用：

tarefa.finalizada = true;

servico.tarefas = [...service.tarefas];