Estoy revisando varios ejemplos y probé algunos de ellos, pero no puedo eliminarlos del nivel de la interfaz de usuario. Intenté usar *ngFor. Entonces, ngFor solo está eliminando <span>, no <buttons> en las etiquetas <li>. Luego intenté con la indexación pero aún no tuve éxito.

<div>
  <ul style="list-style-type: none;">
    <li  *ngFor="let item of todos; let i = index" class="todo-item">
      <span [ngClass]="{ inactive: item.done }">{{ item.value }}</span>

      <button class="todo-item-button" (click)="editUser()">Edit</button>
      <button class="todo-delete-button" (click)="deleteUser(item,i)">Delete</button>
    </li>
  </ul>
</div>

Componente: -

todos: Todo[] = [];

ngOnInit() {
this.todos = this.todoService.getAllTodos();
}

deleteUser(todos ,index: number) {
    this.todoService.deleteIndexDb(todos.id)
    .subscribe(
      () => {
        this.todos.splice(index, 1);
      });
  }

Necesito poca ayuda en esto.

-1
NoobCoder 13 jul. 2021 a las 09:39

3 respuestas

La mejor respuesta

Reasignarlo con la sintaxis de propagación

deleteUser(todos ,index: number) {
    this.todoService.deleteIndexDb(todos.id)
    .subscribe(
      () => {
        this.todos.splice(index, 1);
        this.todos = [...this.todos]
      });
  }
1
Kinglish 13 jul. 2021 a las 07:10

Debe cambiar la referencia a su matriz todos para que funcione la detección de cambios angulares. Array.splice no es la mejor opción, ya que no crea una nueva matriz. Puede utilizar Array.filter o Array.map:

deleteUser(todos ,index: number) {
    this.todoService.deleteIndexDb(todos.id)
    .subscribe(
      () => {
        this.todos = this.todos.map((item, i) => {
          if (i !== index) {
            return item;
          }
        });
      });
  }
1
lbsn 13 jul. 2021 a las 07:06

El cambio de valores de tipo Object no activará la detección de cambios, las matrices se tratan como objetos en Javascript. Por lo tanto, debe volver a asignar la nueva matriz que se devuelve desde el método de empalme al objeto todos como se muestra a continuación.

//ES5`enter code here`
this.todos.splice(index, 1);
this.todos = new Array(this.todos);
//ES6
this.todos.splice(index, 1);
this.todos = [...this.todos];
0
priston lewis 13 jul. 2021 a las 07:25