如何确保下拉选项加载完成后如何下拉模型加载，而又不会破坏angular 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>

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

解决方法

我认为您可以尝试以下方法：

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的两个订户）之间添加了| async。这样，ddOptionSrv.getDrpOption()将仅一次被调用，并且返回的值将从drpOption | async发送到订户，并从drValue | async"发送给订户。

使用此方法，您可以确保在选项后加载模型值。

,

一种可能的解决方案是使用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$将等待两个Observable的第一个发射，并在每次发射时，从每个Observable发射最新值。

此外，如果两个可观察对象都仅发射一次，请使用forkJoin而不是combineLatest。
您可以在this stackblitz

中运行演示