cuadro.component.ts
I have a problem, I am trying to delete a data
<ul>
<li *ngFor="let user of users">
<p @heroState='user.state' (click)="user.toggleState()">{{user.name}}</p>
<p>{{user.state}}</p>
<button (click)="remove(user)"> Eliminar </button>
</li>
</ul>
export class CuadroComponent {
@Input() users:EjemploService;
@Output() evento=new EventEmitter();
...
}
// app.component
selector: 'my-app',
template: 'Prueba angular2.0</h1>
<p>Probando cuadro</p>
<button [disabled]="!users.canAdd()" (click)="users.addActive()">Añadir Activo</button>
<button [disabled]="!users.canAdd()" (click)="users.addActive()" >Añadir Inactivo</button>
<button [disabled]="!users.canRemove()" (click)="users.remove()" >Remover </button>
<cuadro [users]=users (evento)="evento($event)"></cuadro>
',
example.service.ts
remove(user:User=null){
console.log("USER A REMOVER==",user)
if(user==null){
this.items.splice(this.items.length-1,1);
}
else{
this.items=this.items.filter(u=>u!=user);
}
console.log("LISTA FINAL",this.items)
this.items.forEach(function(x,y){
console.log(x,y);
})
}
It shows me a list of users, next to each one there is a button, when I press that user deletes me, the detail is that it eliminates me badly example: one two 3 4
I eliminate the second one and it eliminates the whole strip from below, remaining. 1
I have put the code concerning those parts, I hope your help, as for the remaining users, I have put several logs and I see that when I delete the user n, if I return all the users that should go, but these do not are displayed, but only those that were above the one that you delete.
As you can see before deleting.
//
After deleting, next to a console, they show me the remaining users, but these are not reflected in the directive.