javascript – Angular2子组件在ngFor中意外销毁

所以我有一个带有@Output事件的from的Component,它在提交时触发,如下所示：

@Component({
    selector: 'some-component',
    templateUrl: './SomeComponent.html'
})
export class SomeComponent{    
    @Input() data: any;
    @Output() onSubmit: EventEmitter<void> = new EventEmitter<void>();

    constructor(private someService: SomeService) {}

    submitForm(): void{
        this.someService.updateBackend(this.data, ()=>{
            this.onSubmit.emit();
        });
    }
}

我正在使用ngFor来创建此Component的多个元素：

<template let-data ngFor [ngForOf]="dataCollection">
    <some-component  [data]="data" (onSubmit)="doSomthing()"></some-component>
</template>

最后一个缺失的部分是提交时使用的服务：

@Injectable()
export class SomeService{

    constructor() {}

    updateBackend(data: any, callback: () => void): void{
        /*
         * updating the backend
         */.then((result) => {
            const { errors, data } = result;

            if (data) {
                callback();
            }
        })
    }
}

在submitForm()函数的开头,this.onSubmit.observers是一个包含一个观察者的数组,就像它应该的那样.

一旦它到达调用this.onSubmit.emit()的回调方法,this.onSubmit.observers就是一个包含ZERO观察者的数组.

我遇到了两种非常奇怪的行为：

>如果我删除了在SomeService.updateBackend中更新后端的实际调用,它完全正常,观察者仍然是一个包含一个观察者的数组！
>如果我保持对后端的实际调用但不使用ngFor并仅显示一个< some-element>它也可以很好地工作,将一个观察者保留在回调范围内的this.onSubmit.observers中！

知道我做错了什么吗？

提前致谢！

更新：

感谢@ StevenLuke关于记录someComponent的ngOnDestroy的评论,我发现它在发射之前被销毁了.

实际上,当SomeService.updateBackend完成时,它正在做的第一件事是销毁该组件的所有实例并重新创建它们！

这就是观察者改变的原因！为什么会这样？

解决方法:

如果在* ngFor中提供trackBy函数来标识dataCollection中的项,则不会销毁和初始化.你的模板是：

<some-component *ngFor="let data of dataCollection;trackBy:trackByFunction"
  [data]="data" (onSubmit)="doSomthing()"></some-component>

trackByFunction看起来像：

trackByFunction(index, item) {
    return item ? item.id : undefined;
}

因此,即使dataCollection中的项是新对象,如果其id与前一个集合中的id匹配,* ngFor将更新[data]但不会销毁并初始化该组件.

标签：javascript,this,components,angular,ngfor
来源： https://codeday.me/bug/20190527/1165798.html