如何在循环内的 Angular 模板上的 div 中动态命名引用

Question

I'm developing a project using Angular 8.3.

I have a loop (using *ngFor) and I need that every div that I add has an unique reference name created dinamically).

This is my example code:

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

Below I have another drag and drop zone that must receive these elements:

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

I need to change dynamically #done0, eg (#done0, #done1, #done2, #done3, etc).

How can I do it? I have tryed using #done{{i}}} but it doesn't work.

I don't know if I can use trackBy in this case and how to apply it.

Many thanks,

Answer 1

Reference a container

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

and in.ts you have different references in a NodeList

const list = this.doneContainer.childNodes 

or in more Angular way, which is better as it will update when necessary

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