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提供了几个可以别名为局部变量的导出值：

index将设置为每个模板的当前循环迭代上下文。
首先将设置为表示是否为该项的布尔值是迭代中的第一个。
last将设置为一个布尔值，指示该项是否为迭代中的最后一个。
甚至将设置为一个布尔值，指示此项是否具有一个均匀的指数。
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

Answer 2

我更喜欢使用适合您的自定义指令。

演示：https://plnkr.co/edit/XO1GjQTejR8MxoagTZR5?p=preview 检查broswer的控制台

import { Directive,Input,Outpu,ElementRef,Renderer} from '@angular/core';

@Directive({
  selector:"[getRef]",
  host:{
    '(click)':"show()"
  }
})
export class GetEleDirective{

  constructor(private el:ElementRef){ }
  show(){
    console.log(this.el.nativeElement);
    console.log(this.el.nativeElement.offsetLeft);   
  }

}

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

2 个答案: