如何获取由NgFor创建的元素的引用和位置

Question

我有一个NgFor用于构建一行元素的组件......

<div *ngFor="let item of list">{{item.text}}</div>

我不知道这些元素有多宽,但后来我需要能够引用一个特定的元素,获取它的left值并移动整个批次,以便所选择的元素与某一点对齐.

我通过添加id到每个元素来完成这个...

<div *ngFor="let item of list" [id]="item.id">{{item.text}}</div>

然后我就用标准getElementById()......

let el:HTMLElement = document.getElementById(someId);
let pos:number = el.offsetLeft;

这样可以正常工作,但似乎可以用更多' Angular2方式 ' 来完成.所以我的问题是......

这种方法可以吗？如果没有,那么获得由NgFor创建的元素的引用的最佳方法是什么,以便我可以获得它们的各种位置和风格属性.

干杯

Answer 1

在 Angular2 中，要获取对特定索引的引用，您需要 在 ngFor 中添加let i = index 。现在您将获得局部变量中的索引号，

NgFor 提供了几个可以作为局部变量别名的导出值：

• 索引将设置为每个模板上下文的当前循环迭代。
• first 将被设置为一个布尔值，指示该项目是否是迭代中的第一个项目。
• 最后将被设置为一个布尔值，指示该项目是否是迭代中的最后一项。
• Even 将被设置为一个布尔值，指示该项目是否具有偶数索引。
• odd 将被设置为一个布尔值，指示该项目是否具有奇数索引。

在你的情况下，div 看起来像这样

<div *ngFor="let item of list ; let i = index">{{item.text}}</div>

希望对你有帮助。

NgFor 支持trackBy选项。trackBy接受一个有两个参数的函数：index 和 item。如果给定了trackBy，Angular 将通过函数的返回值来跟踪变化。

有关更多详细信息，请访问https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html