我的BehaviorSubject无法正常工作，并且似乎没有调用“ next”

问题描述

我有剪辑服务：

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始终记录一个空数组。

我在这里想念什么？

解决方法

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

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

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

1. 如果要使用BehaviourSubject初始化null，则最好将ReplaySubject与缓冲区1一起使用。它的作用与BehaviorSubject相同，只是它没有不需要默认值（因此您不必处理初始的null）并且它没有BehaviorSubject的同步getValue()函数。

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