我使用ngx-bootstrap创建了一个正常工作的caroucel，它工作正常，但现在我试图使[itemsPerSlide]随页面宽度动态变化。我尝试在组件中使用@HostListener('window:resize', ['$event'])
onResize(event) {...，但是即使“数字”值根据页面宽度而改变，每个幻灯片的项目在html上也不会改变，
<!--<HTML>--->
<carousel [itemsPerSlide]="number">
<slide *ngFor...>
....
</slide>
</carousel>
<!--COMPONENT-->
@HostListener('window:resize', ['$event']) onResize(event) {
this.width = event.target.innerWidth;
if(this.width <= 480 /*small*/){
this.number = 1
}...
任何建议都会有所帮助。
我想念有关您问题的更多信息，但是我在Stackblitz上举了一个解决该问题的示例。我希望它有用，click here。
尽管我认为限制项目的最佳方法是使用CSS，使用媒体查询和选择器:not(:first-child) { display: none }。