ngx-owl-carousle-o分页在Angular 10中不起作用

Question

我有一个简单的Angular 10应用程序，我在其中使用ngx owl carousel。我有分页问题。当我尝试单击下一页时，它没有按预期工作，并出现此错误。

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'translate3d(-297px,0px,0px)'. Current value: 'translate3d(-1488px,0px,0px)'.
at throwErrorIfNoChangesMode (core.js:5625)
at bindingUpdated (core.js:13962)
at bindingUpdated2 (core.js:13977)
at bindingUpdated4 (core.js:13986)
at Module.ɵɵpureFunction5 (core.js:24421)
at StageComponent_Template (ngx-owl-carousel-o.js:3393)
at executeTemplate (core.js:7449)
at refreshView (core.js:7318)
at refreshComponent (core.js:8465)
at refreshChildComponents (core.js:7126)

carousel.component.html

<div class="wrapper">
<h3 *ngIf="data.products.length !== 0" class="category-title">{{data.title}}</h3>
<owl-carousel-o (dragging)="isDragging = $event.dragging" [options]="customOptions">
<ng-container *ngFor="let slide of data.products">
<ng-template carouselSlide>
<a *ngIf="slide.product_type == 1 || slide.product_type == 4" [owlRouterLink]="['/animations', slide.id]" [stopLink]="isDragging"  class="image">
<img [src]="slide.feature_avatar.xxxdpi" [alt]="" [title]="slide.name">
<div class="title">
<h4>{{slide.name}}</h4>
</div>
</a>
<a *ngIf="slide.product_type == 3" [owlRouterLink]="['/animations/collection', slide.id]" [stopLink]="isDragging"  class="image">
<img [src]="slide.feature_avatar.xxxdpi" [alt]="" [title]="slide.name">
<div class="title">
<h4>{{slide.name}}</h4>
</div>
</a>
</ng-template>
</ng-container>
</owl-carousel-o>
</div>

转盘组件

import { Component, OnInit, Input } from '@angular/core';
import { HomeItem, Result } from 'src/app/shared/models/homeMain.model';
import { OwlOptions } from 'ngx-owl-carousel-o';
@Component({
selector: 'carousel',
templateUrl: './carousel.component.html',
styleUrls: ['./carousel.component.scss']
})
export class CarouselComponent implements OnInit {
customOptions: OwlOptions;
isDragging: boolean;
constructor() { }
@Input() data: Result
ngOnInit() {
this.customOptions = {
rtl: false,
loop: true,
lazyLoad: true,
mouseDrag: true,
touchDrag: true,
pullDrag: false,
dots: true,
navSpeed: 700,
navText: ['', ''],
margin: 10,
stagePadding: 10,
responsive: {
0: {
items: 2
},
400: {
items: 3
},
740: {
items: 3
},
940: {
items: 5
},
1024: {
items: 5
}
},
nav: false
}
}
}

它适用于角8，但不适用于角10，我还有一个问题，这个路由不起作用，甚至无法点击。

Answer 1

问题是*ngIf指令是滑块中的标记。将这样的*ngIf指令放入<ng-template carouselSlide>

<owl-carousel-o (dragging)="isDragging = $event.dragging" [options]="customOptions">
<ng-template carouselSlide *ngIf="slide.product_type == 1 || slide.product_type == 4">
<a [owlRouterLink]="['/animations', slide.id]" [stopLink]="isDragging" class="image">
<img [src]="slide.feature_avatar.xxxdpi" [alt]="" [title]="slide.name">
<div class="title">
<h4>{{slide.name}}</h4>
</div>
</a>
</ng-template>
<ng-template carouselSlide *ngIf="slide.product_type == 3">
<a [owlRouterLink]="['/animations/collection', slide.id]" [stopLink]="isDragging" class="image">
<img [src]="slide.feature_avatar.xxxdpi" [alt]="" [title]="slide.name">
<div class="title">
<h4>{{slide.name}}</h4>
</div>
</a>
</ng-template>
</owl-carousel-o>