Question

我有一个对象数组，我想使用Angular的* ngFor。

进行迭代

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

以下代码说明了目标，但显然无效。

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

</div>

如何以最干净的方式在obj上设置元素引用？

Answer 1

你可以创建一个指令并将项目传递给它，然后让指令将元素分配给项目

@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>

我个人认为这比你能提出的任何标记杂技更清晰。

Angular2附加ngFor将HTML元素呈现给数据

1 个答案: