问题标签 [angularjs-track-by]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
3366 浏览

angular - 在 Angular 4 中使用 trackBy 对 *ngFor 数组进行排序

我在排序和具有 trackBy 函数的数组时遇到问题。用例如下:

我有一个项目数组。所有这些项目都有一个 z-index 属性。我还有一个图层管理器​​,可以编辑每个项目的 z-index。当我想保存我的项目时,我想根据每个项目的 z-index 属性对我的数组进行排序。我的 ngFor 上还有一个 trackBy 来限制 *ngFor 上的更改检测量。

在我的 *ngFor 上使用 trackBy 函数,当我对数组进行排序时,项目会切换位置(这很糟糕)。如果我删除 trackBy 函数,这不会发生,并且项目根据 z-index 排序。

*ngFor:

trackBy 函数:

如您所见,当项目的长度发生变化或我切换语言设置时,*ngFor 也会发生变化。我试过添加+ ', ' + item.zIndex,但这不起作用。

排序功能:

所以似乎 trackBy 和这个 sort 函数由于某种原因发生了冲突。现在的结果是,当我使用排序函数时,项目数组会根据 z-index 进行排序,但项目也会切换位置,这意味着它们的维度属性由于某种原因被切换。

我想要的是项目数组根据 z-index 排序,但项目保持其尺寸。

我需要如何更改我的 trackBy 函数或我的排序函数,以便获得我想要的结果?

0 投票
1 回答
816 浏览

angular - 列表顺序更改后 Ionic virtualScroll 不刷新

当我在构造函数中对列表进行排序时,使用 Ionic3 和 virtualScroll 可以正常工作,但是当我使用页面上的排序按钮来更改列表的排序顺序时,排序完成但列表没有刷新。我见过 virtualTrackBy 但我不确定这是我需要的,因为我的数组确实在变化。重新排序后如何确保列表刷新?

完整代码可见: https ://stackblitz.com/edit/ionic-list100k-segment-index

0 投票
2 回答
48 浏览

angularjs - AngularJS:如果 $index 发生变化,我如何为文本设置动画?

我在 angularjs 中有一个应用程序,它在后台使用 $interval() 并每秒通过 PHP 从数据库中请求数据。

然后我使用 track by $index ,这确实有助于提高性能。

但是当数据发生变化时,我想将文本颜色更改 1 秒<td>

0 投票
2 回答
674 浏览

angularjs - Ng-repeat 一次性绑定和“跟踪”更改

我们的网络应用程序使用 ngRepeat 来显示项目列表。数组及其对象永远不会更改,但用户可以修改其中对象的值。

我们为每个项目生成一个唯一的 trackId。每次项目的值更改时,都会更新此 trackId。

我们还使用一次性绑定语法来减少页面上的观察者数量(因为它可以迅速攀升至数千个)。

但是,这种组合似乎并没有真正起作用。如果项目的 trackId 更改但对象的引用保持不变,则不会重新渲染项目。

从 angularJS 文档:

自定义表达式:可以使用任何 AngularJS 表达式来计算跟踪 id,例如使用函数或使用集合项的属性。item.id 跟踪项目中的项目是当项目具有唯一标识符(例如数据库 ID)时的典型模式。在这种情况下,对象身份无关紧要。只要 id 属性相同,两个对象就被认为是等价的。通过唯一标识符进行跟踪是最高效的方式,应尽可能使用。

如果是这样,为什么修改trackId时item没有销毁并重新创建?

例如:

在这个演示中,我希望当 trackId 更改时对象会被销毁,并且应该使用新的一次性绑定值重新渲染元素。

https://plnkr.co/edit/Lklq3ZNDUuggjgwmkoxj?p=preview

有人对解决此问题的方法有任何建议吗?出于性能原因,我们绝对不能删除一次性绑定。我还研究了 angular-bind-notifier 但这将需要更新重复中的每个绑定,因为它不能针对特定行。

谢谢

0 投票
1 回答
1534 浏览

angular - Angular trackBy 不能在嵌套 *ngFor 中工作

我的组件有点像

trackBy 函数为

内部权限我有一组分配给此权限的用户。我可以从 x <> y 权限集中更新用户。当我更新 datasetPermission 数组或向其中添加新元素时,它正在更新更新/添加的数据集的顺序。

我浏览了各种帖子,但还没有找到有用的东西。我在这里做错了什么吗?任何帮助,将不胜感激。

0 投票
1 回答
491 浏览

angular - 如何在 AsyncPipe 上使用 trackBy 进行图像渲染,它每次都重新渲染页面?

我的问题是如何在 Async 管道上使用 trackby 并在其下渲染图像。

我已经完成了以下操作。在 HTML 中

在我的 component.ts

现在的问题是我有一个 2 分钟的计时器,之后我使用 next 语句将新元素推送到friend$ observable

每次我这样做时,我都可以看到对所有图像的请求。并且每张图片都有闪烁效果,为什么?我正在使用 track by 来不重新渲染 dom 元素。

0 投票
1 回答
114 浏览

angularjs - 角轨道通过给出缺失属性错误

我在我的 ionic angular 应用程序中使用功能跟踪,在构建应用程序时,它给了我错误: 类型'(索引:任何,项目:任何)=>任何'缺少类型'any []'中的以下属性: pop、push、concat、join 等等 25 种。

我将此功能用作:

html:

零件:

知道我在做什么错吗?感谢帮助。

0 投票
0 回答
273 浏览

angular - Angular ngFor在更改数组位置时重新渲染trackBy

我希望在ngForid 更改数组上的索引/位置时不重新渲染。在这种情况下,该trackBy方法无法正常工作。

考虑下面的代码,在 TS 文件中

和 html

单击按钮会更改视图,但每个 id 的值仍然相同 这是Stackblitz Demo上的示例

0 投票
1 回答
42 浏览

angular - 角轮询 trackBy 不会触发 ngDestroy 但组件已更新

在此示例 中https://stackblitz.com/edit/angular-ivy-hptdnu?file=src%2Fapp%2Fgrid%2Fgrid.component.html 没有 trackBy 触发了 ngOnDestroy 挂钩并更新了数据我可以理解

但在这个其他示例中 https://stackblitz.com/edit/angular-ivy-aan45e?file=src%2Fapp%2Fgrid%2Fgrid.component.html 与 trackBy ngOnDestroy 钩子永远不会触发并且数据更新没有任何问题但我真的不明白为什么!我的意思是,如果没有销毁触发,则行组件不应该在 @Input 上没有设置器的情况下更新

你能解释一下,我想念什么吗?

0 投票
2 回答
50 浏览

angular - ngFor trackBy 未使用 ngModel 正确识别项目

我会简短。

这是 stackblitz 上的问题:trackByBugntfree \

说明:
资源包含显示在屏幕上的权限,带有复选框。\

Objective:
当一个“权限”被选中时,只有它引用的对象应该被使用 ngModel 修改。\

问题:
当检查资源“A”的权限“一”时,资源“B”和“C”的权限“一”也被选中。

编辑:也许切片是问题,我会尝试解决这个问题