如何确保在dropdown选项加载完成后加载dropdown模型，同时又不破坏angular 9中代码的异步特性
如何确保在dropdown选项加载完成后加载dropdown模型，同时又不破坏angular 9中代码的异步特性
提问于 2020-09-14 00:12:54
我有primeng dropdown和两个服务调用，一个调用获取下拉选项，另一个调用获取模型绑定数据。一旦我保存了选定的值并重新加载页面，偶尔就不会显示选定的值。我相信这是因为服务调用的异步性质。我猜模型值服务调用是在加载所有下拉选项之前完成的。
ngOnInit {
this.drpOption = this.ddOptionSrv.getDrpOption();
this.ddValueSrv.getDrpModelVal().subscribe(data => {
this.drValue = data
})
}模板代码：
<p-dropdown [options]="drpOption | async" [(ngModel)]="drValue"></p-dropdown>如何确保dropdown模型值在dropdown options加载后加载，而不会将模型服务全部移动到options调用的subscribed方法中(保持异步性质)？
回答 2
Stack Overflow用户
发布于 2020-09-14 18:32:12
我想你可以试试这个：
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()，我们在数据生产者(提供选项的服务)和数据消费者(来自| async的两个订阅者)之间添加了一个Subject。这样，ddOptionSrv.getDrpOption()将只调用一次，返回值将从drpOption | async发送给订阅者，并从drValue | async"发送给订阅者。
这样，您就可以确保模型值在选项之后加载。
Stack Overflow用户
发布于 2020-09-14 03:06:31
一种可能的解决方案是使用combineLatest，让我们看一个更简单的示例(省略导入)：
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
data$: Observable<[number, number]>;
private first$: Observable<number> = interval(1000);
private second$: Observable<number> = interval(2000);
ngOnInit(): void {
this.data$ = combineLatest([this.first$, this.second$]);
}
}模板将是：
<ng-container *ngIf="data$ | async as data">
<div>first$ = {{ data[0] }}</div>
<div>second$ = {{ data[1] }}</div>
</ng-container>这样，async | data$将等待两个可观测对象的第一次发射，并在每次发射时，从每个发射中发出最新的值。
此外，如果两个可观察对象仅发射一次，请使用forkJoin而不是combineLatest。
您可以在this stackblitz中运行演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63872870
复制相关文章
相似问题
腾讯云开发者
