时间戳

首页 > 解决方案 > 如何在下拉选项加载完成后确保下拉模型加载而不破坏角度 9 中代码的异步性质

angular - 如何在下拉选项加载完成后确保下拉模型加载而不破坏角度 9 中代码的异步性质

问题描述

我有primeng下拉菜单和两个服务调用，一个调用获取下拉选项，一个调用获取模型绑定数据。一旦我保存了选定的值并重新加载页面，有时选定的值不会显示。我相信这是因为服务调用的异步性质。我猜模型值服务调用在加载所有下拉选项之前完成。

ngOnInit {
   this.drpOption = this.ddOptionSrv.getDrpOption();

   this.ddValueSrv.getDrpModelVal().subscribe(data => {
         this.drValue = data
   })
}

模板代码：

<p-dropdown [options]="drpOption | async" [(ngModel)]="drValue"></p-dropdown>

如何确保在下拉选项加载后加载下拉模型值而不将模型服务全部移动到选项调用的订阅方法中（保持异步性质）？

标签： angularrxjsprimeng-dropdowns

解决方案

我想你可以试试这个：

this.drpOption$ = this.ddOptionSrv.getDrpOption().pipe(share())

this.drValue$ = this.drpOption$.pipe(
  switchMapTo(this.ddValueSrv.getDrpModelVal()),
)

<p-dropdown [options]="drpOption | async" [(ngModel)]="drValue | async"></p-dropdown>

通过使用share()，我们在Subject数据生产者（提供选项的服务）和数据消费者（来自 的 2 个订阅者| async）之间添加了一个。有了这个，ddOptionSrv.getDrpOption()将只被调用一次，返回的值将被发送给订阅者 fromdrpOption | async和订阅者 from drValue | async"。

有了这个，您可以确保模型值在选项之后加载。

推荐阅读