我有一个仅在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 {
}
}
我知道也会异步管道处理该情况。如果是的话,关于我可能做错了什么建议,请注意我已订阅并检查observable是否有数据。async
管道将处理Observable
,但是如果Observable仍然undefined
<ul *ngIf="(todos$ | async).length">
<li *ngFor="let todo of todos$ | async">{{todo.name}}</li>
</ul>
首先,您必须使用* ngIf,然后需要使用for循环进行打印
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 {
}
}
似乎您永远不会从select(selectTodos)
中获取任何数据