时间戳

首页 > 解决方案 > 无法让 Observable 输出到组件

angular - 无法让 Observable 输出到组件

问题描述

几周以来，我一直在开发 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 仅支持绑定到 Iterables，例如 Arrays。

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

如果这里有人愿意帮助克服我花了几天时间克服的最后一道障碍，我将不胜感激。我的代码在 Stackblitz 上

要重现错误：

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

先感谢您。

标签： angularobservablengrxrxjs6

解决方案

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

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>

希望这会奏效！让我知道您是否可以解决问题。

推荐阅读