構造函數被稱爲* 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

回答

相關問題