2

cuadro.component.ts

Tengo un problema,estoy tratando de eliminar un dato

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

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

Me muestra una lista de usuarios ,al costado de c/u hay un boton , cuando presiono me elimina ese usuario , el detalle esta que me elimina mal ejemplo: 1 2 3 4

elimino el segundo y me elimina toda la tira de abajo , quedando. 1

he puesto el codigo concerniente a a esas partes,espero su ayuda, en cuanto a los usuarios que quedan , he puesto varios logs y veo que cuando elimino el usuario n , si me retorna todos los usuarios que deberian ir , pero estos no se muestran , sino solo los que estaban arriba del que elimine.

Como ven antes de eliminar. Como se ve antes de eliminar//

Como ven si me retorna los usuarios que deberian quedar

Luego de eliminar , al costado en un console ,me muestran los usuarios que quedan, pero estos no se reflejan en la directiva.

1

1 respuesta 1

0

Remueve el usuario por medio del indice del arreglo.

<ul>
    <li *ngFor="let user of users; let i of index">
        <p @heroState='user.state' (click)="user.toggleState()">{{user.name}}</p> 
        <p>{{user.state}}</p>
        <button (click)="remove(i)"> Eliminar </button>
    </li>
</ul>

Y tu función en el service

remove(index){
    this.users.splice(index, 1);
}

Si remueves por el indice del arreglo te seguirá mostrando los usuarios en la lista sin afectar el orden.

Espero te funcione.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.