在 Nativescript Angular 動畫后向集合添加新項目時，ngFor 崩潰

Question

我使用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;
}

我正在使用頁面機制從服務器加載項目。 每次5個。 加載下一頁並將新元素插入項目並調用this.cdr.detectChanges() 后，我崩潰了”

未處理的承諾拒絕：無法讀取 null 的屬性“銷毀”； 區域： ; 任務： Promise.then ； 值：類型錯誤：無法讀取 null 的屬性“已銷毀”

• 我正在使用 ChangeDetectionStrategy OnPush
• 看起來這是由於滑動動畫

游樂場示例（需要進行滑動以觸發重新加載和崩潰）

Answer 1

查看您的代碼后，我發現崩潰的兩個主要原因。

• 您正在 Angular 上下文之外運行滑動事件，實際上您正在手動觸發更改檢測，但我懷疑它是否在正確的時間完成。
• 此外，您沒有在動畫后清理陣列，因此隨着時間的推移，可能會有 100 幅圖像最終也會影響您的性能。

這是更新的操場，崩潰似乎在我這邊得到了修復。 但老實說，它仍然可以改進。 我建議您查看 Jen Looper 撰寫的關於Tinder Style Cards with NativeScript Angular的博客文章，這可能會幫助您改進設計。