Как получить доступ к элементам, созданным с помощью NgFor

Question

Утро все. Я уже спрашивал об этом раньше, но не ответил, но мой вопрос был плохо сформулирован, поэтому I've put together a plunk that will hopefully show what I'm doing

Как я могу - у меня есть Service, который предоставляет список имен и треков, которые в настоящее время выбраны. Он также имеет методы для изменения этого выбора и BehaviourSubject, который уведомляет о произошедшем изменении. Выбранное имя отображается в главном приложении.

Полный список имен отображается Component, а другой Component содержит пользовательский интерфейс для изменения выбранного имени.

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

Мой вопрос касается методов, которые я использую при позиционировании и моделировании ListComp. Они находятся в src/list.com.ts по строке 40 и далее в my plnk.

Когда компонент получает уведомление о том, что выбранный элемент изменен, мне нужно получить ссылку на конкретный элемент HTMLElement, который был создан ngFor на основе этого элемента данных. Затем мне нужно применить стиль к выбранному элементу и переместить контейнер так, чтобы он совпал с остальной частью моего макета.

позиционирование часть работает как вы можете видеть, используя getElementById(), но есть более Угловая как это можно сделать?

Я тогда совершенно не уверен в том, как применить стиль selected к выбранному в данный момент элементу. Все советы здесь хороши!

Я действительно надеюсь, что это имеет смысл. Я потратил слишком много времени на оригинальную сборку, а теперь на plnkr и SO, и я надеюсь, что я просто пропустил лес для деревьев (или что-то еще).

Прошу прокричать, могу ли я прояснить что-либо в своем объяснении.

Спасибо всем большое :)

Answer 1

я не мог полностью понять вашу проблему, но я хотел бы предложить подход, при котором не требуется доступ к элементу, но вместо того, чтобы обновить модель и пусть Угловая сделать DOM модификация:

<div *ngFor="let item of listService.listData" class="cell" id="cell-{{item}}" 
    [class.selected]="item == selected">{{item}}</div> 

constructor(private listService:ListService){ 
accordingly 
    listService.nameSelection.subscribe(name => { 
     this.selected = name; 
    }); 
    } 

Plunker example