Problem using Observable in the component, Async, trackBy, how to update a list

Hi all,
as I saw in many tutorials, it is highly recommended to use native way of Angular if we are dealing with an observable service.

So I have a service like "ActionService" with a method:
` findAll(): Observable {
return this.http.post(this.baseUrl)
}

My Component:
export class ActionCodesComponent {
actionCodes$: Observable

constructor(private actionService: ActionService) {
this.actionCodes$ = this.actionService.findAll();
}

onDelete() { // how should I refresh the Observable here???
this.actionCodes$ = this.actionService.findAll();
}

trackByActionCode(index, actionCode): string {
return actionCode ? actionCode.id : undefined
}
}

The Problem:
right now, if I delete an element from a list by clicking on "X" span, the whole list is being rendered again and flicking. So at first the trackBy function does not work (if I use the same function not with observable but with array of elements, it works very fine).
Second: How can I update my Observable without recreation it again like this.actionCodes$ = this.actionService.getAll()?
All examples on youtube and internet showing like myObservable = the Subject() and myObservable.next().
But it does bot work with my Observable this.actionCodes$. There is no next() method available at all.

Can somebody tell me what I am doing wrong here? If I cannot update a list using Observable (not an array), why it is recommended by every Angular expert?
Thanks

Comments

[RomanRSN]

I could not add a template code above, since something does not work correctly here.
So it is my simplified template:

delete

[RomanRSN]

I just cannot put any html here, so the template is very simple: inside my div I having
*ngFor="let actionCode of actionCodes$ | async; trackBy: trackByActionCode"