绑定需要时间来更新视图 - Angular 2答案

【问题标题】：Binding takes time to update View - Angular 2绑定需要时间来更新视图 - Angular 2
【发布时间】：2016-05-04 07:29:59
【问题描述】：

我在这里遇到了一个小问题。我正在将一个对象数组与视图绑定，其中包含一些初始值。然后我将一些更多的值推送到该数组，并在推送值后在视图中刷新它。但是当它们刷新时，我需要使用 jQuery 隐藏它们并进行一些其他计算。

我的代码 -

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(View) 中找到具有该 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);

现在我需要一种更清洁、更好的方法来使此功能正常工作。模型中发生更改时是否会触发任何事件？或者也许我可以访问变化检测器？订阅变更检测器？

感谢任何帮助。谢谢。

【问题讨论】：

尽量不要混合使用 angular 和 jquery

标签： jquery binding angular

【解决方案1】：

你无能为力。 setTimeout() 是使用 jQuery 的最佳 Arroach。或者，您可以使用绑定来隐藏项目。

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

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

【讨论】：

对不起，我没有在我的问题中提到，但是如果我需要做其他事情怎么办？就像我也在设置该 Item div 的顶部和左侧位置一样。但我无法做到这一点:(
您也可以像<my-item [style.top.px]="itemTop"> 一样绑定它，其中itemTop 是组件上的一个属性，其值类似于150。你应该尽量避免在 Angular2 中使用 jQuery
我不想绑定它。其实我只想第一次绑定它。但这在角度 2 中是不可能的。如果我绑定它，并在视图中的附近或任何位置添加一些其他元素，所有元素都会重新定位。
不知道你说的“只有第一次”是什么意思
我的意思是一次性绑定，不是单向或双向绑定。

【解决方案2】：

我遇到过类似的问题，想在 ng-repeat 完成绑定所有元素后获得通知或调用回调函数。那时我找到了一个解决方案并编写了一个通用指令以在每个项目中重用它。我也写了一篇关于这个的小帖子。 Check this link。我希望这会对你有所帮助。

【讨论】：

抱歉，我现在做不到，但是当我写一个新指令时会更新这个答案。