通过单击按钮与可观察列表进行交互

Question

我是Observables的新手，正在尝试让用户与产品列表进行交互。以被动方式删除产品后，我无法解决如何删除产品。

products$: Observable<ProductModel[]>;

ngOnInit() {
    this.products$ = this.route.paramMap.pipe(
        switchMap((params: ParamMap) => this.productService.getProducts())
    );
}

onDeleteClick(id:number) {
    this.productService.deleteProduct(id).subscribe(()=>{
         //How do I remove a product from the array
    });
}

这是同一件事，但使用行为主题。感觉没有好处，最好选择简单的产品系列。

products$: Observable<ProductModel[]>;
productsSubject: BehaviorSubject<ProductModel[]> = new BehaviorSubject(ProductModel[0]);

ngOnInit() {
    this.products$ = this.productsSubject.asObservable();
    this.route.paramMap.pipe(
        switchMap((params: ParamMap) => this.productService.getProducts()),
    ).subscribe(res=> {
        this.productsSubject.next(res);
    });
}

onDeleteClick(id:number) {
    this.productService.deleteProduct(id).subscribe(()=>{
        this.productsSubject.next(this.productsSubject.value.filter(c=>c.id != id));
    });
}

更简单的数组实现

products: ProductModel[];

ngOnInit() {
    this.route.paramMap.pipe(
        switchMap((params: ParamMap) => this.productService.getProducts()),
    ).subscribe(res=> {
        this.products = res;
    });
}

onDeleteClick(id:number) {
    this.productService.deleteProduct(id).subscribe(()=>{
        this.products = this.products.filter(c=>c.id != id)
    });
}    

第一个实现是如此简洁，但是我没有看到通过单击按钮与可观察命令链进行交互的方法。