динамически назовите div в html и получите к нему доступ с помощью @ViewChild(‘xyz’) div: ElementRef; в angular

#angular

#angular

Вопрос:

Я хотел создать div внутри * ngfor и присвоить ему динамический идентификатор и получить к нему доступ в компоненте, используя viewchild и ElementRef. мой текущий html, как показано ниже

 <ng-container *ngFor="let consult of crap | keyvalue; let j = index; trackBy: trackByFn;">
     <td>
       <input  type="radio" name="radio-{{i}}" id="radio-{{i}}-{{j}}(click)="questBuild(consult)"/>
             <label class="sr-text" for="radio-{{i}}-{{j}}">{{consult.value.text}}</label>
               <ng-container *ngIf="consult.value.quest">
                  <div #questions></div>
                </ng-container>
          </td>
    </ng-container>
  

и доступ к нему в компоненте как

   @ViewChild('questions') div: ElementRef;
  

f
итак, есть ли способ динамично назвать #questions внутри * ngFor и получить к нему доступ с помощью @viewchild в компоненте

Ответ №1:

используйте ViewChildren . Просмотр дочерних элементов — это список запросов, в котором у вас есть все элементы.

 @ViewChildren('question') questions:QueryList<ElementRef> 
//or is yer "questions" are components
@ViewChildren('question') questions:QueryList<ComponentName> 
  

Вы можете получить доступ к определенному элементу как

 const question=this.questions.find((x,i)=>i==index)