уменьшить счетчик длины при удалении в Angular

Question

У меня следующий код html для отображения счетчика длины

 <span *ngIf="Products?.length" class="badge badge-danger ml-1 text-dark">
            {{Products.length}} 
 </span>

.ts файл

  Products: [];

  socket = io.connect('http://134.209.150.112:3000');

  constructor(
    private _router: Router,
    public data: ApiService
  ) { }


  ngOnInit() {

    this.getProducts();
    this.socket.on('productAdded', () => {
      this.getProducts();
    })
  }

  getProducts() {
    this.data.getcustomize().subscribe((res) => {
      this.Products = res['products'];
    })
  }

удалить .ts файл

onDelete(productId: string){
    this.service.deleteCart(productId).subscribe((res) => {
      console.log(res);
      this.service.getcustomize().subscribe((res) => {
        this.Products = res['products'];
          })
      })
}

Я могу удалить файл, но количество не уменьшается. Для этого нужно refre sh. Я пытаюсь уменьшить количество во время удаления.

Answer 1

Вместо этого вы можете преобразовать вложенную подписку в switchMap.

onDelete(productId: string) {
  this.service.deleteCart(productId).pipe(
    switchMap(() => this.service.getcustomize())
  ).subscribe(res => {
    this.Products = res['products'];
  });

Вложенные подписки - плохая практика.

Answer 2

Как насчет использования отдельного поля для длины

productsLength: number;
getProducts() {
  this.data.getcustomize().subscribe((res) => {
    this.Products = res['products'];
    this.productsLength = res['products'].length;
  })
}

А при удалении уменьшите его на единицу

onDelete(productId: string) {
  this.service.deleteCart(productId).subscribe((res) => {
    console.log(res);
    this.service.getcustomize().subscribe((res) => {
      this.Products = res['products'];
      this.productsLength--;
    })
  })
}