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

Posted 2023-02-19

【中文标题】使用异步管道显示从应用程序状态检索到的 Observable 数据

【英文标题】：Use async pipe to show Observable data retrieved from the Application State

【发布时间】：2021-08-23 01:17:51

【问题描述】：

我的代码从 Application State 获取数据，然后在 component.html 中显示数据。

component.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();

component.html

myData$.myField

上面的代码完美运行。

现在，我不想在 component.ts 中调用 subscribe() 方法，而是在 component.htmlasync 管道/strong>，这样：

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

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

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

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

【问题讨论】：

在地图运算符内部，您返回的是操作而不是可观察的 map((code) => this.myStore.dispatch(myDataAction( code: code )))

嗨@Chellappanவ，我应该如何编辑我的代码？

您的subscribe() 正在订阅this.myStore.select(codeSelector)。没有它，您的商店选择器将不会返回任何内容，因为它是冷可观察的。作为回报，它不会执行您的操作，并且可能不会更新fetchMyData 正在选择的您的商店数据。顺便说一句，正如一个答案所暗示的，您应该使用 tap() 而不是 map()

嗨@FrankFajardo，谢谢你的解释。现在我知道我必须订阅“this.myStore.select(codeSelector)”才能使“this.myData$ = this.myStore.select(fetchMyData)”工作；然后我可以在模板内的“myData$”上使用异步管道。

【参考方案1】：

尝试点击操作符来获得地图的副作用

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

然后在组件内部

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

【讨论】：

嗨@Chellapan，可能我解释得不好。如果我按照您的建议使用 subscribe()，我的代码就可以工作。我试图做的是避免使用 .subscribe() 并在模板中使用异步管道（自动订阅和取消订阅）

实际上，当使用异步管道时，您不需要订阅内部组件，您可以使用点击运算符。它会在异步管道解析时被调用

谢谢你的帮助。实际上，您编写的代码正是我在 *** 上寻求帮助之前编写的代码。差别不大：我不能做“data$ = this.myStore.select...”，因为“data$”有一个类型（正如你在我的帖子中看到的那样是“IMyData”类型），并且“ this.myStore.select..." 只返回一个字符串（我只是传递给操作）。无论如何，我认为 FrankFajardo 恰到好处：我必须订阅（）到“this.myStore.select（codeSelector）”才能使整个代码正常工作。

@Matt 是的，您需要订阅才能使流程正常运行。