无法让 Observable 输出到组件

Question

我已经在 Ngrx 应用程序上工作了数周，现在试图让这个可观察的应用程序输出到组件。最初，我认为我的ngrx 实体和reducer 有问题，所以我现在尝试将这个特定调用从ngrx 框架中取出并直接调用它来输出。它仍然行不通。顺序如下：

this.pomos$ = this.pomoQuery.getTaskPomos(snapshot.params.id);

从 app/tasks/containers/selected-task-page.ts 调用并订阅输出然后传递到

this.pomos$.subscribe(pomos => {
     this.pomos = pomos;
    });

一个显示组件app/tasks/components/pomo-tracker.ts

<div class="pomo-container mat-elevation-z8">
    <div class="pomo-header">
    <mat-list>
      <mat-list-item>
          This is for the pomos
      </mat-list-item>
    </mat-list>
    <mat-list *ngFor="let pomo of pomos">
      <mat-list-item>{{ pomo.notes }}</mat-list-item>
    </mat-list>
    </div>
</div>

无论我尝试什么，它都不会绑定到组件并输出。我尝试添加 json 管道。我尝试关闭异步管道。我试图以不同的方式订阅 observable。我已经尝试过管道和映射到它。我完全不知所措。我对 rxjs 比较陌生。如您在此处看到的，observable 将值输出到控制台。

我不断遇到的错误之一是 错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

我确信这与返回的 json 对象有关，但为什么这个 observable 没有输出，而其他所有对象都输出。这就是为什么我尝试将 json 管道添加到输出但也不起作用的原因。

如果这里有人愿意帮助我克服我花了几天时间克服的最后一道障碍，我将不胜感激。 My Code is on Stackblitz here

重现错误：

1. 使用 test/test 登录
2. 来自 Sidenav：查找任务
3. 搜索 Python
4. 将任务添加到集合。
5. 点击播放按钮。 5 秒后将超时
6. 输入注释并提交
7. 刷新页面：在控制台查看错误。

提前谢谢你。

Answer 1

我做了一些修改，从你的最后一步没有发现任何错误。

action AddPomoSuccess {payload: {…}, type: "[Pomo] Add Pomo Success"}

这是我的修改：

import { Observable } from 'rxjs';

pomos$: Observable<Pomo[]>;

在你的模板中：

    <mat-list *ngFor="let pomo of pomos$ | async">
      <mat-list-item>{{ pomo.notes }}</mat-list-item>
    </mat-list>

希望这会奏效！如果您能解决问题，请告诉我。