如何获得参考 - 和位置 - 通过NgFor

创建的元素我有一个使用NgFor构建元件的行组件...如何获得参考 - 和位置 - 通过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创建的元素的引用，以便我可以获得他们的各种位置和风格的属性。

干杯

来源

2016-10-01 popClingwrap

你为什么不只是适用于一些CSS类的元素呢？类似'[class.selected] =“item === selectedItem”'用CSS'.selected {margin-left：10px;}'。我的意思是，你真的需要知道你的元素的offsetLeft？ –

在Angular2为得到一个参考到一个特定的指数，你需要添加ngFor内设I =指数。现在，您将获得在局部变量的索引号，

NgFor提供了可以使用别名局部变量的几个出口值：

索引将被设置为当前的循环迭代为每个模板上下文。
首先将被设置为一个布尔值，指示项目是否是迭代中的第一个值。
last将被设置为一个布尔值，指示该项目是否为迭代中的最后一个。
甚至会设置为一个布尔值，指示此项目是否具有偶数索引。
奇数将被设置为一个布尔值，指示此项目是否具有奇数索引。

在你的情况那么div会这个样子

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

希望这会帮助你。

NgFor支持trackBy选项。 trackBy接受一个具有两个参数的函数：索引和项目。如果给出trackBy，则角度曲线会根据函数的返回值而变化。

欲了解更多详情，请通过https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

来源

2016-10-01 19:56:02

......这很有用，但似乎与实际问题无关，除非我错过了什么？最初的问题不是关于如何在ngFor中获取索引，而是关于如何访问针对ngFor的特定索引的DOM元素输出，这是一个非常不同的事情。 – taxilian

我宁愿使用自定义的指令，它会为你工作。

演示：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); 
    } 

}

来源

2016-10-01 19:57:40 micronyks

在我的情况下，没有与元素的互动。我有'NamesComp'组件，它显示名称列表'Alice | Bob |卡罗尔......从左到右排列，每个都在自己的元素中。之后，第二个组件选择一个名称，第三个组件生成x/y坐标。我希望能够定位我的'NamesComp'，以便使用选定名称的正确子元素与选定的X/Y点对齐。 – popClingwrap

很难理解你在说什么。 – micronyks

如何获得参考 - 和位置 - 通过NgFor

回答

相关问题