асинхронный оператор на неопределенной наблюдаемой - PullRequest
Новая
       24

асинхронный оператор на неопределенной наблюдаемой

1 голос
/ 06 ноября 2019

У меня есть компонент, который показывает информацию, только если observable имеет данные. но когда я пытаюсь использовать оператор async на observable I , я не вижу никакого значения. Меня смущает то, как работает асинхронный канал . Я думаю, что потребуется время для инициализации наблюдаемого , в этом случае async pipe не будет ничего делать с неопределенной наблюдаемой, и поэтому компонентне отображается. 

@Component({
  template: `
    <div *ngIf="todo$ | async as todo">
      <div {{todo.name}} </div>
    </div>   
  `
})
export class TodosComponent implements OnInit, OnDestroy {

  todo$: Observable<Todo>;

  constructor(private store: Store<State>) {}

  ngOnInit() {
    this.todo$ = this.store
      .pipe(select(selectTodos));
  }

  ngOnDestroy(): void {
  }
}

Я знаю, что async труба будет обрабатывать Observable, но что, если Observable все еще undefined будет также обрабатывать асинхронную трубу в этом сценарии. если да, то есть ли какие-либо предположения о том, что я могу делать неправильно, пожалуйста, обратите внимание, что я подписался и проверьте, есть ли данные, наблюдаемые в системе.

Ответы [ 3 ]

1 голос
/ 06 ноября 2019

Есть несколько проблем с кодом. @Wandrille упомянул первый - вы ссылаетесь на todos вместо todo в своем шаблоне. Кроме того, у вас нет закрывающей угловой скобки для открывающего тега <div> для текста {{todo.name}}. Однако я ожидаю, что любая из этих проблем приведет к ошибке компиляции. Ваш код в точности соответствует указанному в списке?

Другая вероятная проблема заключается в том, что вы пытаетесь извлечь элемент name из массива (т. Е., Возможно, todos$ должен иметь тип Observable<Todo[]>). В этом случае вам необходимо настроить объявления типов (и селектор selectTodos, если применимо), а затем выполнить итерацию соответствующим образом: 

@Component({
  template: `
    <div *ngIf="todos$ | async as todos">
      <div *ngFor="let todo of todos">
        {{todo.name}}
      </div>
    </div>   
  `
})
export class TodosComponent implements OnInit, OnDestroy {

  todos$: Observable<Todo[]>;

  constructor(private store: Store<State>) {}

  ngOnInit() {
    this.todos$ = this.store
      .pipe(select(selectTodos));
  }

  ngOnDestroy(): void {
  }
}
1 голос
/ 07 ноября 2019

Асинхронный канал также работает с несколькими задержанными и изначально неопределенными наблюдаемыми. Я сделал стекаблитц, чтобы вы увидели:

множественные наблюдаемые-назначения

Похоже, вы никогда не получите никаких данных из вашего select(selectTodos)

1 голос
/ 06 ноября 2019

Вы должны попробовать это 

<ul *ngIf="(todos$ | async).length">
  <li *ngFor="let todo of todos$ | async">{{todo.name}}</li>
</ul>

Сначала вы должны использовать * ngIf, затем вам нужно использовать цикл для его печати

...