在 Nativescript Angular 动画后向集合添加新项目时 ngFor 崩溃
ngFor crashes when adding new items to collection after animation in Nativescript Angular
我使用 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个。
在加载下一页并将新元素插入 items 并调用 this.cdr.detectChanges() 后,我崩溃了
Unhandled Promise rejection: Cannot read property 'destroyed' of null ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'destroyed' of null
- 我正在使用 ChangeDetectionStrategy OnPush
- 看起来这是因为滑动动画
Playground example (Need to do swipes in order to trigger reload and crash)
查看您的代码后,我发现崩溃的主要原因有两个。
- 你是 运行 在 Angular 上下文之外的滑动事件,确实你手动触发了变化检测,但我怀疑它是否在正确的时间完成。
- 此外,您没有清理数组 post 动画,因此随着时间的推移,可能会有 100 多张图像最终也会影响您的性能。
这是 Jen Looper 的 Updated Playground, the crash seems to be fixed on my end. But honestly it could be still improved. I would recommend taking a look at the blog post on Tinder Style Cards with NativeScript Angular,可能会帮助您改进设计。
我使用 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个。 在加载下一页并将新元素插入 items 并调用 this.cdr.detectChanges() 后,我崩溃了
Unhandled Promise rejection: Cannot read property 'destroyed' of null ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'destroyed' of null
- 我正在使用 ChangeDetectionStrategy OnPush
- 看起来这是因为滑动动画
Playground example (Need to do swipes in order to trigger reload and crash)
查看您的代码后,我发现崩溃的主要原因有两个。
- 你是 运行 在 Angular 上下文之外的滑动事件,确实你手动触发了变化检测,但我怀疑它是否在正确的时间完成。
- 此外,您没有清理数组 post 动画,因此随着时间的推移,可能会有 100 多张图像最终也会影响您的性能。
这是 Jen Looper 的 Updated Playground, the crash seems to be fixed on my end. But honestly it could be still improved. I would recommend taking a look at the blog post on Tinder Style Cards with NativeScript Angular,可能会帮助您改进设计。