我的行为主体未按预期工作，似乎没有调用"next"

Question

我有一个剪辑服务：

export class ClipService {
allClips: Clip[] = [];
private clips = new BehaviorSubject<Clip[]>(null);
constructor(private http: HttpClient) {
this.loadClips();
}
private fetchClips(body?: string): Observable<Clip[]> {
let url = myurl/clips;
try {
return this.http.get<Clip[]>(url);
} catch (e) {
console.error('Error fetching clips: ' + e);
}

}
loadClips(): void {
this.fetchclips().subscribe(allClips => this.allClips = allClips);
this.setClips(this.allClips);
}
getClips(): Observable<Clip[]> {
return this.clips.asObservable();
}
}

和一个ClipComponent.ts，我在这里接受这样的服务：

ngOnInit(): void {
this.clipService.getClips().subscribe(clips => {
this.allClips = clips;
this.clips = this.allClips;
console.log(this.clips);
this.populateFilters(this.clips);
});
}

即使触发了对API的调用并且返回了大约200个剪辑，组件中的console.log也总是记录一个空数组。

我在这里错过了什么？

Answer 1

1. 变量this.allClips在服务中异步分配。因此，任何直接依赖于它的语句都必须在订阅中。当您执行this.setClips(this.allClips);时，它仍然保持以前的值或undefined

loadClips(): void {
this.fetchclips().subscribe(allClips => {
this.allClips = allClips;
this.setClips(this.allClips);
});
}

您可以在此处找到有关异步数据的更多信息。

2. 如果使用null初始化BehaviourSubject，那么也可以使用带有缓冲区1的ReplaySubject。它的作用与BehaviorSubject相同，只是它不需要默认值(因此不必处理初始的null(，也不具有BehaviorSubject的同步getValue()功能

private clips = new ReplaySubject<Clip[]>(1);