如何解决嗨,我在 swiper angular
core.js:4352 错误错误:ExpressionChangedAfterItHasBeenCheckedError:检查后表达式已更改。以前的值:'swiper-slide swiper-slide-active '。当前值:'swiper-slide'。
这是我的代码:
<swiper [slidesPerView]="1" [spaceBetween]="50" [navigation]="true" [pagination]="{ clickable: true }" [scrollbar]="{ draggable: true }">
<ng-template swiperSlide *ngFor="let advertiser of staticAdvertisers; let indice=index">
<a [href]="[advertiser?.link]" target="_blank">
<div class="item-container">
<div class="advert-cover display-feed-player">
</div>
</div>
</a>
</ng-template>
</swiper>
</div>
这是 .ts
导入 SwiperCore,{ 导航、刷卡 } 来自“swiper/核心”;
SwiperCore.use([导航]);
@UntilDestroy()
@组件({ 选择器:“应用社交”, templateUrl: './social.component.html',styleUrls: ['./social.component.scss'],动画:[ 触发器('淡入',[ 过渡(':输入',[ 样式({不透明度:'0'}), animate('0.8s 缓动',style({ opacity: '1' })),]),],})
导出类 SocialComponent 实现 OnInit、AfterViewInit、OnDestroy {
public getUsernameOrId = getUsernameOrId;
private user;
public currentUser;
public playerUrl = environment.playerUrl;
/* styleTest */
public desktop: any = screen.width >= 1200;
public laptop: any = screen.width >= 1024 && screen.width < 1200;
public tablet: any = screen.width >= 768 && screen.width < 1024;
public mobile: any = screen.width === 320 && screen.width < 768;
/* styleTest */
提前致谢。
解决方法
the "ExpressionChangedAfterItHasBeenCheckedError" telling that you've changed something after initialization.
based on your provided code,it seems that you are removing "swiper-slider" class from element,or replacing it with another one...
"swiper-slide" class must be on ever slide element,always !
here's default implementation of swiper
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
,
过去几天我遇到了同样的问题,一段时间后我发现 swiperSlides 中的 *ngIfs 和 *ngFors 破坏了它,因为 swiper 的初始化方式。这样我在 Swiper GitHub 上发现了一个最近的问题: https://github.com/nolimits4web/swiper/issues/4123
事实证明此行为已在昨天的更新 (6.4.9) 中修复:https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md
当我将 Swiper 版本从 6.4.8 更新到 6.4.10 时,不再出现错误,幻灯片现在按预期工作。最近似乎在 Swiper 和 Angular 的协同工作方面付出了很多努力,所以最近有很多更新也可能解决您的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。