未定义的可观察对象上的异步运算符

Question

我有一个组件，仅当 observable 有数据时才显示信息。但是当我尝试在 observable 上使用 async 运算符时，我 没有看到 任何值。我对 async pipe 的工作方式感到困惑我认为需要一些 时间来初始化 observable 在这种情况下 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 异步管道也会处理该场景。如果有，请注意我已经订阅并检查 observable 是否有数据。

Answer 1

你应该试试这个

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

首先你必须使用 *ngIf 然后你需要使用 for 循环来打印它

Answer 2

有几个代码问题。 @Wandrille 提到了第一个——您在模板中引用 todos 而不是 todo 。此外，{{todo.name}} 文本的开始 <div> 标记没有右尖括号。不过，我希望这些问题中的任何一个都会导致编译错误。您的代码与所列代码完全一致吗？

另一个可能的问题是您试图从数组中获取 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 {
  }
}

Answer 3

异步管道也适用于多个延迟的和最初未定义的可观察对象。我做了一个 stackblitz 给你看：

multiple-observable-assigns

您似乎从未从 select(selectTodos)

中获取任何数据

未定义的可观察对象上的异步运算符

async operator on undefined observable

rxjs

ngrx

angular

rxjs6