angular - 使用异步管道显示从应用程序状态检索到的 Observable 数据

Question

我有从应用程序状态获取数据然后在 component.html 中显示数据的代码。

组件.ts

myData$: Observable<IMyData>;

ngOnInit() {
   this.myData$ = this.myStore.select(fetchMyData);

   // here I get a code and I use it to dispatch a new action
   this.myStore.select(codeSelector).pipe(
      map((code) => this.myStore.dispatch(myDataAction({ code: code })))
    ).subscribe();
}

组件.html

{{myData$.myField}}

上面的代码完美运行。

现在，我不想在component.ts中调用subscribe()方法，而是在component.html中使用管道，这样：async

<ng-container *ngIf="myData$ | async as data">
{{data.myField}}
   

当我这样做时，component.html 中不会显示任何内容。我知道在我后面的代码中，我使用的运算符有问题。

我多次使用异步管道，但仅在调度标准操作时使用；在操作员内部调度操作时，我从未使用过它。

你能帮我理解我的错误吗？

Answer 1

尝试点击运算符以获得地图而不是地图的副作用

   data$ = this.myStore.select(codeSelector).pipe(
      tap((code) => this.myStore.dispatch(myDataAction({ code: code })))
    )

然后内部组件

<ng-container *ngIf="myData$ | async as data">
</ng-container>