我的 BehaviorSubject 没有按预期工作，似乎没有调用“下一个”答案

【问题标题】：My BehaviorSubject not working as expected and does not seem to call "next"我的 BehaviorSubject 没有按预期工作，似乎没有调用“下一个”
【发布时间】：2020-09-24 08:27:02
【问题描述】：

我有剪辑服务：

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

我在这里错过了什么？

【问题讨论】：

请创建minimal reproducible example
我更新了代码并删除了这里不需要的所有内容。我不知道如何创建一个“实时”示例，因为我使用了一个数据库。有没有办法嘲笑它？

标签： angular observable behaviorsubject

【解决方案1】：

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

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

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

如果您使用null 初始化BehaviourSubject，您也可以使用带有缓冲区1 的ReplaySubject。它的用途与BehaviorSubject 相同，只是它不需要默认值（所以你不必处理初始的null)，它没有BehaviorSubject的同步getValue()功能。

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

【讨论】：