Блог

Главная - Вопросы по программированию - Angular2 присоединяет обработанный HTML-элемент ngFor к данным

Angular2 присоединяет обработанный HTML-элемент ngFor к данным

#angular #angular2-components

#angular #angular2-компоненты

Вопрос:

У меня есть массив объектов, которые я хочу перебрать, используя Angular *ngFor .

После отображения элементов я хочу установить новое свойство для объектов (называемое nativeElement), которое ссылается на узел HTML, отображающий этот объект.

Следующий код иллюстрирует цель, но, очевидно, не работает.

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

</div>

Как я могу установить ссылку на элемент в obj самым чистым способом?

Комментарии:

1. какую версию angular вы используете бета-версию или стабильную

2. Я использую stable / final

Ответ №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>

Лично я считаю, что это чище, чем любая акробатика разметки, которую вы можете придумать.

Комментарии:

1. Мне это нравится. Было бы еще лучше, если бы вы могли попросить ngFor предоставить текущий «элемент», не передавая его в атрибуте. Что-то вроде <my-element *ngFor=»разрешить элемент данных»></my-element> и позволить компоненту автоматически позаботиться об этом внутренне. Возможно ли это?

2. Кроме того, действительно ли ngOnDestroy необходим для этого? Можете ли вы объяснить, почему это может привести к утечке памяти? Если предмет был удален из коллекции, как вы можете быть уверены, что он не будет должным образом очищен?

Метки: