如何從可觀察<Array<any>>

Question

刪除特定元素有一個可觀察的地方數組：

places: Observable<Array<any>>; 

在其與異步管道中使用的模板：

<tr *ngFor="let place of places | async"> 
    ... 
</tr> 

一些用戶動作後，我需要從這個數組中刪除具有特定ID的地方。我在我的代碼中有這樣的東西，但它不起作用：

deletePlace(placeId: number): void { 
    this.apiService.deletePlace(placeId) 
    .subscribe(
    (res: any) => { 
     this.places 
     .flatMap((places) => places) 
     .filter((place) => place.id != placeId); 
    }, 
    (err: any) => console.log(err) 
);  
} 

你能幫我嗎？

Answer 1

你不能做這種方式，因爲你不能「更新」可觀察到的（即不保持狀態）但你可以通過它對事件做出反應。

爲您的使用情況下，我會充分利用scan運營商和合並兩個流成一個單一的一個：

• 一個是初始加載
• 另一個用於刪除事件。

下面是一個示例：

let obs = this.http.get('/data').map(res => res.json()); 

this.deleteSubject = new Subject(); 

this.mergedObs = obs.merge(this.deleteSubject) 
.startWith([]) 
.scan((acc, val) => { 
    if (val.op && val.op==='delete') { 
    var index = acc.findIndex((elt) => elt.id === val.id); 
    acc.splice(index, 1); 
    return acc; 
    } else { 
    return acc.concat(val); 
    } 
}); 

觸發元件的缺失，簡單地對所述受試者發送的事件：

this.deleteSubject.next({op:'delete', id: '1'}); 

見本plunkr：https://plnkr.co/edit/8bYoyDiwM8pM74BYe8SI?p=preview。

Answer 2

過濾函數是不可變的，不會更改原始數組。

我的deletePlace功能更改爲類似這樣： -

deletePlace(placeId: number): void { 
    this.apiService.deletePlace(placeId) 
    .subscribe(
    (res: any) => { 
     this.places = this.places.filter((place) => place.id != placeId); 
    }, 
    (err: any) => console.log(err) 
);  
}