Angular2将ngFor渲染的HTML元素附加到data上

Question

我有一个对象数组，我想用Angular的*ngFor来遍历它。

项目呈现后，我想在对象上设置一个新属性(称为nativeElement)，该属性引用呈现该对象的HTML节点。

下面的代码说明了目标，但显然不起作用。

<div *ngFor="let obj of arrayOfObjs"
     [ngInit]="obj.nativeElement = thisDivNode">
</div>

如何以最干净的方式设置对象上的元素引用?

Answer 1

你可以创建一个指令，然后把item传递给它，让指令把元素赋值给item

@Directive({
  selector: '[addElement]'
})
class AddElementDirective implements OnInit, OnDestroy {
  @Input('addElement') obj: any;
  constructor(private el: ElementRef) {}
  ngOnInit() {
    this.obj.nativeElement = this.el.nativeElement;
  }
  ngOnDestroy() {
    this.obj.nativeElement = null;
  }
}

然后像

一样使用

<div *ngFor="let item of data" [addElement]="item">
</div>

我个人认为这比你能想出的任何标记技巧都要简洁。