构造函数被称为* ngFor中的重复由于@ViewChild

我有一个角2组件，我已经创建了，我在* ngFor指令中使用，并且它看起来构造函数被调用两次为每个实例。构造函数被称为* ngFor中的重复由于@ViewChild

所以如果我有2个记录返回到我的集合，我的组件的构造函数被输入4次。如果我有三个构造函数被解雇6次。

这对我造成了一些问题，因为我在构造函数中订阅了RxJs observable，因此我的事件正在重复执行，所以在处理删除事件时，代码尝试多次删除相同的记录，）电话。

代码结构是这样：

最外面的组件

<div class="list-row-container" *ngFor="let holiday of holidays"> 
    <div style="border:1px; border-style: solid; margin: 5px;"> 
    <div style="margin: 5px;"> 
    <extended-inline-edit actionClass="fa-calendar" 
    [entityId]="holiday.id"> 
     <holiday-view-body view-body [holiday]="holiday"></holiday-view- 
    body> 
     <holiday-edit-body edit-body [holiday]="holiday" [venueId]="venueId" 
    [year]="year"></holiday-edit-body> 
     </extended-inline-edit> 
    </div> 
    </div> 
</div>

我这是受影响的组件是节日编辑体成分，它被transcluded到我扩展-inline-edit组件托管它（不知道是否会影响构造函数被触发的次数）

我收集如下填充在最外层部分的ngOnInit，holidays.ts：

ngOnInit() { 

    this.holidayService.getVenueHolidayInheritanceIndicator(this.venueId).then((data) => { 
     this.inheritFromAccount = data.sameAsAccount; 
     if (this.inheritFromAccount === false) { 
     this.loadVenueHolidays(); 
     } else { 
     this.loadAccountHolidays(); 
     } 
    }); 
    } 

    loadVenueHolidays() { 
    this.holidayService.getVenueHolidays(this.venueId, this.year).then((data) => { 
     this.holidays = data; 
    }); 
    }

来源

2017-10-20 CheGuevarasBeret

您是否尝试将订阅到observable移动到'ngOnInit'？ – zgue

请添加代码如何'假期'初始化/更新。 –

感谢zgue，我搬出了ngInit，因为我认为这可能是我的问题，所以发生在那里。 – CheGuevarasBeret

我的问题似乎已经由组件进一步向上有我的“父”的引用层次结构造成组件，它具有@ViewChild属性，并且在此代码中，正在调用刷新我的集合，以便从数据库中检索2个节假日，并且根据* ngFor创建了我的组件，然后此刷新调用再次带来两个节假日，并且* ngFor再次发射（我假设????），所以我的事件被连线两次。

我摆脱了刷新调用，但这仍然会发生在其他事件中，因此取消订阅我的组件的ngOnDestroy方法，如下所示，以确保没有错误的订阅敲响！（从构造函数仍然设置的订阅）

ngOnDestroy() { 
    this.clearDownSubscriptions(); 
    } 

    clearDownSubscriptions(){ 
    this.deleteHolidaySubscription.unsubscribe(); 
    this.asideCloseSubscription.unsubscribe(); 
    this.scheduleSavedSubcription.unsubscribe(); 
    this.saveHolidaySubscription.unsubscribe(); 
    this.editToggledSubscription.unsubscribe(); 
    this.performActionSubscription.unsubscribe(); 
    }

来源

2017-10-20 11:48:50 CheGuevarasBeret

构造函数被称为* ngFor中的重复由于@ViewChild

回答

相关问题