我的 BehaviorSubject 没有按预期工作并且似乎没有调用 "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

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

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

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

如果您使用 null 初始化 BehaviourSubject，您也可以将 ReplaySubject 与缓冲区 1 一起使用。它与 BehaviorSubject 的用途相同，除了它不需要默认值（因此您不必处理初始 null）并且它没有 BehaviorSubject 的同步 getValue() 函数。

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

我的 BehaviorSubject 没有按预期工作并且似乎没有调用 "next"

My BehaviorSubject not working as expected and does not seem to call "next"

observable

behaviorsubject

angular