未定义可观察到的异步运算符

Question

我有一个仅在observable有数据时才显示信息的组件。但是，当我尝试在async上使用observable运算符时，我没看到任何值。我对async pipe的工作方式感到困惑，我认为在这种情况下async pipe不会对未定义的observable做任何事情，因此需要花费[[时间来初始化observable，这就是组件未显示的原因。

@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。另外，对于<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 {
  }
}

Answer 3

异步管道还可以与多个，延迟的和最初未定义的可观察对象一起使用。我进行了一次堆叠闪电战，供您查看：

multiple-observable-assigns

似乎您永远不会从select(selectTodos)中获取任何数据