Come rimuovere specifico elemento da Observable <Array<any>>

Question

C'è un Observable della matrice di posti:

places: Observable<Array<any>>; 

Nel modello ha usato con il tubo asincrono:

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

Dopo alcune azioni dell'utente I è necessario rimuovere il luogo con ID specifico da questo array. Ho qualcosa di simile nel mio codice, ma non funziona:

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) 
);  
} 

Potete aiutarmi con questo?

Answer 1

Non si può fare in questo modo dal momento che non è possibile "aggiornare" un osservabile (cioè non tenere Uniti) ma puoi reagire a un evento attraverso di esso.

Per il vostro caso d'uso, vorrei sfruttare l'operatore scan e unire due flussi in una sola:

• uno per il caricamento iniziale
• un altro per l'evento di eliminazione.

Ecco un esempio:

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); 
    } 
}); 

per innescare una cancellazione elemento, è sufficiente inviare un evento sul tema:

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

Vai a questa plunkr: https://plnkr.co/edit/8bYoyDiwM8pM74BYe8SI?p=preview.

Answer 2

La funzione di filtro è immutabile e non cambierà la matrice originale.

vorrei cambiare la funzione deletePlace a qualcosa di simile: -

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) 
);  
}