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

2024-05-15 • 问答

我有一个仅在observable有数据时才显示信息的组件。但是当我尝试在async上使用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是否有数据。

您应该尝试这个

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

首先，您必须使用* ng；如果需要，则需要使用for循环进行打印

有两个代码问题。 @Wandrille提到了第一个-您在模板中引用的是df.merge(df.sort_values('VALUE'). drop_duplicates('NAME',keep='last')['NAME']. reset_index(),on='NAME') Out[73]: NAME TIMESTAMP VALUE index 0 AAA 2019-01-01 10 3 1 AAA 2019-01-02 21 3 2 AAA 2019-02-01 30 3 3 AAA 2019-02-02 45 3 4 BBB 2019-01-01 50 7 5 BBB 2019-01-02 60 7 6 BBB 2019-02-01 70 7 7 BBB 2019-02-02 80 7而不是todos。另外，对于todo文本的开始<div>标签没有闭合的尖括号。我希望这些问题中的任何一个都会导致编译错误。您的代码是否完全符合所列？

另一个可能的问题是，您正在尝试从数组中获取{{todo.name}}元素（即，name的类型应该为todos$）。在这种情况下，您将需要调整类型声明（和Observable<Todo[]>选择器，如果适用），然后进行适当的迭代：

selectTodos

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

multiple-observable-assigns

似乎您从未从select(selectTodos)中获取任何数据

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

lilyweiwei 回答：未定义可观察到的异步运算符

大家都在问