无法将Observable输出到组件

Question

我已经在Ngrx应用程序上工作了几个星期，现在试图让这一个可观察到输出到组件。最初，我认为这与我的ngrx实体和reducers有争议，所以我现在尝试从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将值输出到控制台，如您所见。

我一直遇到的错误之一是 错误：无法找到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到Iterables，例如Arrays。

我肯定与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>

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