After changing the observable's value, the view doesn't change

Question

I have a logic like this.

component.ts

this.program$ = this.programEntityService.entities$.pipe(
      map(programs => programs.find(program => program.id === this.program.id))
    );
    this.levels$ = this.levelEntityService.entities$.pipe(
      withLatestFrom(this.program$),
      tap(console.log),
      map(([levels, program]) => levels.filter(level => level.programId === program.id)),
      tap(console.log)
    );

component.html

<mat-tab *ngFor="let level of levels$ | async">
...
</mat-tab>

When I add a new level with ngrx dataService like this

this.levelEntityService.add(level)

I expect that the view will be changed in accordance with these changes.

But I have another result:

ngOnInit -> console

(2) [Array(93), {…}]
(14) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

after adding a level

(2) [Array(94), {…}]
(14) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

The whole number of levels has been increased, but the filtered result - not.

Answer 1

I have found the reason of the issue. All my IDs are of type number. But for some reason, the response from the DB turned it into a string. I have changed the filter in this way:

this.levels$ = this.levelEntityService.entities$.pipe(
      withLatestFrom(this.program$),
      map(([levels, program]) => levels.filter(level => +level.programId === +program.id)),
    );

And now it works as expected.