我正在开发一个Angular 应用程序，正在使用Bootstrap 5. 2。我正在使用卡上的Collapse组件，它使用数据属性工作得很完美。
然而，我想触发一个滚动事件的折叠，目前我有卡固定在屏幕的顶部，当用户开始滚动我想卡的身体折叠。我能够得到这个工作的示例化折叠的元素使用Typescript和删除数据属性和切换折叠点击以及使用Typescript。
然而，这个解决方案带来了一些不必要的副作用，比如当点击离开时，画布外的项目仍然有一个褪色的背景，当点击时，下拉列表元素不会弹出。
这就是我如何示例化卡体上的塌陷

ngAfterViewInit(): void {
    this.target = document.getElementById('targetID');
    this.collapse = new Collapse(this.target, { toggle: false });
}

这里我检测srcoll的变化，如果用户向下滚动了50px，那么它会触发折叠以隐藏，否则它必须显示。

ngOnChanges(changes: SimpleChanges): void {
    if (changes.scrollEvent && changes.scrollEvent.currentValue !== changes.scrollEvent.previousValue) {
        this.show = this.scrollEvent.target.scrollTop <= 50;

        if (this.collapse) {
            if (this.show) {
                this.collapse.show();
            } else {
                this.collapse.hide();
            }
        }
    }
}

这是我要折叠的HTML元素，默认情况下应该显示。

<div class="collapse show" id="targetID">
    <div class="card-body rounded bg-white p-1">
        ...content...
    </div>
</div>

是否我做错了什么，导致其他引导元素不能正常工作？或者是否有办法在滚动事件中切换带有数据属性的折叠元素？