改变 observable 的值后，视图不会改变

Question

我有这样的逻辑

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>

当我像这样使用 ngrx 数据服务添加新级别时

this.levelEntityService.add(level)

我希望视图会根据这些更改而更改。

但我有另一个结果：

ngOnInit -> 控制台

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

添加关卡后

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

增加了层数，但过滤后的结果没有。

Answer 1

我找到问题的原因了。我所有的 ID 都是类型编号。但是由于某种原因，数据库的响应将其变成了字符串。我以这种方式更改了过滤器：

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

现在它按预期工作了。

改变 observable 的值后，视图不会改变

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

rxjs

ngrx

angular