Не удается получить Observable для вывода на компонент - PullRequest
Новая
       33

Не удается получить Observable для вывода на компонент

0 голосов
/ 26 мая 2018

Я работаю над приложением Ngrx уже несколько недель, пытаясь сделать его видимым для вывода на компонент.Изначально я думал, что это связано с моими сущностями и редукторами ngrx, поэтому сейчас я попытался исключить этот конкретный вызов из среды ngrx и вызвать его напрямую для вывода.Это все еще не будет работать.Последовательность выглядит следующим образом: 

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

вызывается из app / tasks / container / 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 трубы.Я пытался снять асинхронную трубу.Я пытался подписаться на наблюдаемые по-разному.Я пробовал обвязку к нему.Я в полном недоумении.Я относительно новичок в rxjs.Наблюдаемый выводит значения в консоль, как вы можете видеть здесь.

enter image description here

Одной из ошибок, которые я продолжаю получать, является Ошибка: не удается найти другой поддерживающий объект «[объект]] типа« объект ».NgFor поддерживает только привязку к Iterables, таким как Arrays.

, что, я уверен, связано с возвращением объекта json, но почему эта наблюдаемая не выводит, а все остальные делают.Вот почему я попытался добавить трубу json к выводу, но это тоже не сработало.

Если бы здесь был кто-то, кто был бы так любезен, чтобы помочь преодолеть это последнее препятствие, на которое я потратил дни, я был бы очень признателен. Мой код находится на Stackblitz здесь

Чтобы воспроизвести ошибку:

  1. Войдите в систему с помощью test / test
  2. Из Sidenav: найдите задачу
  3. Поиск Python
  4. Добавление задачи в коллекцию.
  5. Нажмите кнопку воспроизведения.Через 5 секунд произойдет тайм-аут
  6. Ввод заметок и отправка
  7. Обновление страницы: просмотр ошибки в консоли.

Заранее СПАСИБО.

1 Ответ

0 голосов
/ 30 мая 2018

Я сделал некоторые изменения, и с вашего последнего шага не нашел никаких ошибок. 

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>

надеюсь, это сработает!дайте мне знать, если вы можете решить эту проблему.

...