После запроса delete angular, элемент не удаляется из списка

Question

Всем привет. На angular сделал todoList. Возникла проблема с delete запросом. В принципе, он работает, но удаление происходит после обновления страницы. Я понимаю, что запрос уходит на бекенд, но как мне сделать чтобы элементы удалялись сразу?

import { Component } from '@angular/core';
import {Todo,Todos} from './todos';
import { HttpClient } from '@angular/common/http';
import {MatSelectModule} from '@angular/material/select';
//AppComponent.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //title = 'todo';


  selected='';

  public text = '';
 
  
  public isCompleted="";
  public todoList!: Todo[];
  public todos!: Todos[];
  private httpClient:HttpClient;
    constructor(httpClient:HttpClient) { 
      this.httpClient= httpClient;
    }
  
    ngOnInit() {
     this.httpClient.get<Todo[]>('https://intense-plateau-06126.herokuapp.com/categories')
     .subscribe(todoList=>{
       this.todoList=todoList;
     
      })
    }

onRemove(onRemove:Todos):void {          
  
      this.httpClient.delete<Todos[]>('https://intense-plateau-06126.herokuapp.com/categories/2/todos/'+onRemove.id )
      .subscribe(()=>{
       
        {
          this.todoList= this.todoList.filter(todo=>todo.id !== onRemove.id)
          }})
  }
}

//AppComponent.html

<div class="main">
  <label for="addItemInput">What would you like to do today?</label>


 
    <li *ngFor="let todo of todoList">
      <span >{{ todo.title | json}}</span>
 <div class="todo" *ngFor="let item of todo.todos">
        <input type="checkbox"
        name="isCompleted" 
        (change)="onComplete(item)"
        [(ngModel)] = "item.isCompleted">
        
 <span *ngIf="!item.isCompleted">{{ item.text }}</span>
 <span *ngIf="item.isCompleted"><del>{{ item.text }}</del></span>
   
<button  (click)="onRemove(item)">Удалить</button>


   
  </div>
    </li>
  </ul>

Answer 1

В onRemove передается item, который берется из todo.todos

А его id ищется в this.todoList,в котором его нет, соответственно ничего не меняется.

Более того, в адресе удаления жестко указан id категории, соответственно удалятся будет только из нее.

Для решения нужно в метод удаления нужно наравне с item передавать категорию:

<button  (click)="onRemove(item, todo)">

и в самом методе

onRemove(onRemove:Todos, category: Todo):void {          
    this.httpClient.delete<Todos[]>('https://intense-plateau-06126.herokuapp.com/categories/'+category.id+'/todos/'+onRemove.id )
        .subscribe(()=>{
            catergory.todos = category.todos.filter(todo=>todo.id !== onRemove.id)
        })
    }
}

БЛОГ НА HUSL

После запроса delete angular, элемент не удаляется из списка

Ответы (1 шт):