綁定需要時間更新View - Angular 2

我在這裏面臨一個小問題。我綁定一個對象數組與視圖與一些初始值。然後我將更多的值推入該數組中，並在值被推入後在視圖中刷新。但是當它們刷新的時候，我需要使用jQuery來隱藏它們並進行一些其他計算。綁定需要時間更新View - Angular 2

我的代碼 -

Items:Array<Item> = [];

然後我推值這個數組的函數內 -

var allItems = []; 
allItems = getData(); 
allItems.forEach((Item)=>{ 
    this.Items.push(Item); 
}); 

this.Items.forEach((Item)=>{ 
    jQuery('#'+Item.id).hide(); 
    jQuery('#'+Item.id)[0].style.top = this.getTopPosition(); 
    jQuery('#'+Item.id)[0].style.left = this.getLeftPosition(); 
});

但不幸的是，jQuery是無法找到該項目與在DOM這個Id （視圖）。我使用調試器來查找出現了什麼問題，並發現DOM尚未使用Items更新。

要臨時解決這個問題，我使用的setTimeout（） -

setTimeout(()=>{ 
    this.Items.forEach((Item)=>{ 
     jQuery('#'+Item.id).hide(); 
     jQuery('#'+Item.id)[0].style.top = this.getTopPosition(); 
     jQuery('#'+Item.id)[0].style.left = this.getLeftPosition(); 
    }); 
},1);

現在我需要一個更清潔，更好的方式來使此功能工作。模型中發生更改時是否會觸發任何事件？或者，也許我可以訪問變化檢測器？訂閱改變探測器？

任何幫助表示讚賞。謝謝。

來源

2016-05-04 Rehban Khatri

儘量不要混合角和jquery – Gianmarco

你可以做的事情不多。 setTimeout()是使用jQuery的最佳方法。或者，您可以使用綁定來隱藏項目。

<my-item *ngFor="let item in allItems" [hidden]="isHidden(item.id)" ></my-item>

isHidden(id) { 
    return id == this.someHiddenId; 
}

來源

2016-05-04 07:33:35

對不起，我沒有提到我的問題，但如果我需要做其他事情？就像我也設置該項目div的頂部和左側位置。但是我無法做到這一點:( –

你也可以像'那樣綁定，其中'itemTop'是組件上的一個屬性， 150'。你應該儘量避免在Angular2中使用jQuery –

我不想綁定它，實際上我想只是第一次綁定它，但這在角度2中是不可能的。如果我綁定它並在其附近添加一些其他元素或任何在視圖中的所有元素都被重新定位 –

我遇到類似的問題，這樣，想要得到一個通知或調用回調函數NG-重複完成綁定所有的元素之後。那次我找到了一個解決方案，並編寫了一個通用指令在每個項目中重用它。我還寫了一篇關於此的小帖子。 Check this link。我希望這能幫到您。

來源

2016-05-04 07:47:43

您可以使這個指令在Angular 2中工作嗎？ –

對不起，我現在不能這樣做，但是當我寫一個新的指令時會更新這個答案。 –

好的，謝謝。 –

綁定需要時間更新View - Angular 2

回答

相關問題