Как динамически назвать ссылку в шаблоне div на Angular внутри цикла

Question

Я разрабатываю проект с использованием Angular 8.3.

У меня есть al oop (с использованием * ngFor), и мне нужно, чтобы каждый добавляемый div имел уникальное ссылочное имя, созданное динамически).

Это мой пример кода:

<div *ngFor="let item of list; let i = index;">
    <div
        cdkDropList
        #done0="cdkDropList"></div>
</div>

Ниже у меня есть еще одна зона перетаскивания, которая должна принимать эти элементы:

<div
          cdkDropList
          #donesList="cdkDropList"
          [cdkDropListData]="DonesList"
          [cdkDropListConnectedTo]="[done0, done1]"
          class="movie-list"
          (cdkDropListDropped)="onDrop($event)">
            <div *ngFor="let itemList of DonesList" cdkDrag>{{itemList}}</div>
          </div>

Мне нужно динамически изменять # done0, например (# done0, # done1, # done2, # done3, et c).

Как это сделать? Я пробовал использовать #done {{i}}}, но это не сработало.

Я не знаю, могу ли я использовать trackBy в этом случае и как его применить.

Большое спасибо,

Answer 1

Ссылка на контейнер

<div *ngFor="let item of list; let i = index;" #doneContainer>
      <div cdkDropList</div>
</div>

и в .ts у вас есть разные ссылки в NodeList

const list = this.doneContainer.childNodes 

или более Angular способом, что лучше, поскольку он будет обновляться при необходимости

  @ViewChildren('doneContainer') list: QueryList<any>;