Блог

Главная - Вопросы по программированию - Как получить ссылку и положение элемента, созданного ngFor

Как получить ссылку и положение элемента, созданного ngFor

#angular

#angular

Вопрос:

У меня есть компонент, который используется 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 way«. Итак, мой вопрос…

Подходит ли этот подход? Если нет, то каков наилучший способ получить ссылку на элементы, созданные ngFor, чтобы я мог получить их различные позиционные и стилистические свойства.

Приветствия

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

1. Почему бы вам просто не применить какой-нибудь класс css к вашему элементу? Что-то вроде [class.selected]="item === selectedItem" CSS .selected {margin-left:10px;} . Я имею в виду, вам действительно нужно знать offsetLeft вашего элемента?

Ответ №1:

В Angular2 для получения ссылки на определенный индекс вам нужно добавить let i = index внутри ngFor. Теперь вы получите номер индекса в локальной переменной,

ngFor предоставляет несколько экспортированных значений, которые могут быть псевдонимами локальных переменных:

  • индекс будет установлен на текущую итерацию цикла для каждого контекста шаблона.
  • для первого будет установлено логическое значение, указывающее, является ли элемент первым в итерации.
  • последнему будет присвоено логическое значение, указывающее, является ли элемент последним в итерации.
  • для even будет установлено логическое значение, указывающее, имеет ли этот элемент четный индекс.
  • нечетное значение будет установлено в логическое значение, указывающее, имеет ли этот элемент нечетный индекс.

В вашем случае 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

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

1. … Это полезно и все, но, похоже, не имеет отношения к актуальному вопросу, если я чего-то не упустил? Первоначальный вопрос не о том, как получить индекс в ngFor, а о том, как получить доступ к выводу элемента DOM для определенного индекса ngFor, что совсем другое.

Ответ №2:

Я бы предпочел использовать пользовательскую директиву, которая будет работать для вас.

Демонстрация: https://plnkr.co/edit/XO1GjQTejR8MxoagTZR5?p=preview проверьте консоль броузера

 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);   
  }

}

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

1. В моей ситуации нет взаимодействия с элементами. У меня есть NamesComp компонент, который отображает список имен, Alice | Bob | Carol... которые расположены слева направо, каждый в своем элементе. Позже второй компонент выбирает имя, а третий генерирует и координату x / y. Я хочу иметь возможность позиционировать свой NamesComp так, чтобы правильный дочерний элемент с выбранным именем был выровнен с выбранной точкой X / Y.

2. Трудно понять, что вы говорите.