可以使用RxJS的combineLatest操作符将服务调用和查询组合起来,以确保查询在服务调用完成后再执行。以下是示例代码:
import { Component, OnInit } from '@angular/core';
import { combineLatest } from 'rxjs';
import { MembersService } from '../services/members.service';
import { MembersQuery } from '../state/members.query';
@Component({
selector: 'app-members',
templateUrl: './members.component.html',
styleUrls: ['./members.component.scss']
})
export class MembersComponent implements OnInit {
members$ = combineLatest([
this.membersQuery.selectLoading(),
this.membersQuery.selectAll()
]).pipe(
map(([loading, members]) => {
if (loading) {
this.membersService.getMembers();
}
return members;
})
);
constructor(
private membersService: MembersService,
private membersQuery: MembersQuery
) { }
ngOnInit(): void {
}
}
在这个示例中,我们使用combineLatest操作符将membersQuery.selectall和membersQuery.selectLoading组合起来,将它们放入一个observable中。在observable中,我们使用map操作符来处理结果,如果loading是true,我们调用membersService.getMembers来获得所有成员的列表,这会更新Akita的状态。最后,我们返回members。这确保了在服务调用完成前,查询不会返回空列表。