typescript - angular viewChild för dynamiska element inuti ngFor

Min mall har något liknande detta:

<div *ngFor="let data of array">
    <div #div></div>
</div>

finns det ett sätt för mig att namnge varje div olika med hjälp av #? Och i så fall, hur kan jag komma åt dem senare i min TS-fil?

förresten, vad kallas dessa #? Jag kan inte söka efter dem eftersom jag inte har någon aning om vad de är (jag vet bara vad de används till)

Svar #1

TL;DR Använd ViewChildren istället för ViewChild

Som @Commerical Suicide nämnde kan du inte ställa in referenserna dynamiskt.

#div kallas för mallreferensvariabel.

Du kan komma åt dina divs via ViewChildren i din *.ts-fil.

Exempel: @ViewChildren('div') divs: QueryList<ElementRef>

Då kan du kalla flera metoder på din nya QueryList, som forEach eller find.

Svar #2

Det finns ett alternativt sätt att fånga och hantera dynamiska element inuti loopen via händelser.

<div *ngFor="let name of names">
  <input #boofoo type="text" (click)="onClick($event, name)" />
  <button (click)="boofoo.click()">Change text</button>
</div>

Se exempel stackblitz

Relaterade artiklar