Javascript 在Nativescript中动画之后向集合添加新项时，ngFor崩溃

我使用ngFor将一个视图置于另一个视图之上。卡片种类：

<GridLayout rows="*">
    <GridLayout row="0" *ngFor="let image of images; trackBy: trackByList"
        verticalAlignment="center" horizontalAlignment="center"
        [width]="width" [height]="width" (loaded)="itemLoaded($event)"
        [rotate]="getRotationAngle(image)" [style.z-index]="image.zIndex">
        <Image [src]="image.path" [id]="image.zIndex" stretch="aspectFill"
            [width]="width" [height]="width">
        </Image>
    </GridLayout>
</GridLayout>


itemLoaded(event) {
    let grid: any = event.object;

    grid.on(GestureTypes.swipe, (args: SwipeGestureEventData) => {
        if (this.animationIsRunning) {
            return;
        }
        let x = this.width * 1.5;
        let rotate = 45;

        if (args.direction == SwipeDirection.right) { }
        else if (args.direction == SwipeDirection.left) {
            x *= -2;
            rotate *= -1;
        }
        else {
            return;
        }


        this.animationIsRunning = true;
        grid.animate({ translate: { x: x, y: 0 }, opacity: 0, rotate: rotate, duration: 500 })
            .then(() => {
                setTimeout(() => {
                    this.swipeFinished();
                }, 10);
            })
            .catch((e) => {
                console.log(e.message);
            })
    })
}
// 
private swipeFinished() {
    this.swipedImages++;

    if (this.images.length - this.swipedImages <= 2) {

        console.log("Requesting next page");
        this.addNextPage();
        console.log("Next page loaded. Refreshing changes.");
        this.cdr.detectChanges();

        this.animationIsRunning = false;
    }
    else {
        this.animationIsRunning = false;
    }
}
trackByList(index, item: ImageObj) {
    return item.zIndex;
}

itemLoaded（事件）{
let grid:any=event.object；
grid.on（GestureTypes.swipe，（args:swippegestureEventData）=>{
如果（此动画正在运行）{
返回；
}
设x=此宽度*1.5；
旋转=45；
如果（args.direction==SwipeDirection.right）{}
else if（args.direction==SwipeDirection.left）{
x*=-2；
旋转*=-1；
}
否则{
返回；
}
this.animationRunning=true；
动画（{平移：{x:x，y:0}，不透明度：0，旋转：旋转，持续时间：500}）
.然后（（）=>{
设置超时（（）=>{
这个.swipeFinished（）；
}, 10);
})
.catch（（e）=>{
控制台日志（e.message）；
})
})
}
// 
私人swipeFinished（）{
这个.swipedImages++；
如果（this.images.length-this.swipedImages在查看您的代码后，我发现崩溃的两个主要原因


您正在Angular上下文之外运行swipe事件，确实您手动触发了更改检测，但我怀疑它是否在正确的时间完成
此外，您没有清理动画后的阵列，因此随着时间的推移，可能会有100个图像最终也会影响您的性能

下面是问题，我这边的崩溃似乎已经解决了。但老实说，它仍然可以改进。我建议看一看Jen Looper的博客文章，这可能有助于改进您的设计。
我不确定您所说的“扩展收藏”到底是什么意思。但是，仅仅将视图放在一个视图上不应该崩溃，它可能是其他的。你能分享一个最小的游乐场示例来重现这个问题吗？我已经更新了我的问题并添加了一个到游乐场的链接。谢谢Manoj。游乐场不完全是我的设计。它写得很快是为了显示问题。但是如果我理解c正确地说，解决问题的方法是（刷卡）html内部的事件定义？我也不明白为什么我的滑动事件在角度上下文之外运行？您在角度上下文之外运行它，您不应该自己在组件中添加事件监听器，如果您这样做，您应该使用渲染器添加监听器，否则默认情况下会在其外部区域。