Quiero implementar una función para ocultar elementos cuando se hace clic en el botón en una aplicación creada con Angular 2.
<div *ngFor="let todo of todos" class="col-sm-8 col-sm-offset-2"> <div class="panel panel-default step"> // from here <div class="panel-body"> <a [routerLink]="['/todo', todo.id]">{{todo.title}}</a> <button (click)="delete(todo.id)" type="button" class="btn btn-success btn-circle pull-right"><i class="glyphicon glyphicon-ok"></i></button> </div> </div>//so far </div>Quiero saber cómo hacer que desaparezca el todo cuando se hace clic en el botón con el código anterior. Aunque es una pregunta elemental, por favor enseñe.
Debería eliminar ese elemento de tareas pendientes como se muestra a continuación
delete(id:number){ this.todos.splice(id,1) }Creo que esta no es la forma correcta de 'eliminar' un elemento en una lista de tareas pendientes. La respuesta de @Aravind es mejor para eso.
Pero si realmente quieres usar display:none , puedes hacer esto como:
https://plnkr.co/edit/eXwAWWeH9N6REsqpzFCq?p=preview
<element ng-style="displayStyle"></element> <button value="displayNone" ng-click="displayStyle={'display':'none'}">Display none</button>Pequeños cambios en la respuesta de Aravind, ya que necesitamos encontrar el índice de todo , por lo que se eliminará todo correcto
Me gusta pasar el objeto en eliminar:
(click)="delete(todo)" Necesita encontrar el índice de todo y luego splice .
delete(todo) { this.todos.splice(this.todos.indexOf(todo),1); } Me acabo de dar cuenta de que parece que solo desea ocultar la tarea pendiente y no eliminarla por completo. Bueno, esto se puede lograr con lo siguiente. Tras la inicialización, todas las tareas pendientes son visibles. Podríamos introducir una nueva variable a todo, cuando queramos ocultarla. Inicialmente, esta propiedad no existe, por lo que marcamos dentro de la iteración: *ngIf="!todo.hidden" , código completo:
<div *ngFor="let todo of todos"> <div class="panel-body" *ngIf="!todo.hidden">{{todo.name}} <button (click)="hide(todo)" type="button">Hide Todo</button> </div> </div> Y la función ocultar establece la propiedad hidden como verdadera:
hide(todo) { todo.hidden = true; }Obviamente, esto no da la opción de mostrar realmente el todo, pero eso no se mencionó en su pregunta.