Как получить elementRef из fromArray в angular

Question

Как получить доступ к элементу ref из массива. Как # cTab5. Я получаю доступ к # cTab5 с viewchild в тс. но не знаю, как получить доступ к массиву форм.

  @ViewChild("cTab5", { static: false }) cTabE5: NbTabComponent;
 this.campaignLinesAarray().at(Index).get("cTabE5");

  <nb-tab tabTitle="Comments" #cTab5>                              
   </nb-tab>

на самом деле я хочу ссылочную переменную доступа с formArray. Мой html как показано ниже

 <form [formGroup]="add_iroForm">
<div
                  class="accordion-container col-sm-10 col-12"
                  formArrayName="campaign_lines_array"
                  *ngFor="
                    let item of add_iroForm.get('campaign_lines_array')
                      .controls;
                    let i = index
                  "
                >
 <nb-tabset #tabset{{i}} id="acceptable">
  <nb-tab tabTitle="Comments" #cTab1>                              
   </nb-tab>
    <nb-tab tabTitle="Comments" #cTab2>                              
   </nb-tab>
    <nb-tab tabTitle="Comments" #cTab3>                              
   </nb-tab>
</nb-tabset>
</div>
</form>

Answer 1

если у вас есть ссылочная переменная в * ngFor, вам нужно использовать -in code- @ ViewChildren , если вам нужно использовать in. html использовать переменную, Angular учитывать это Например,

<div #item *ngFor="let i of [0,1,2,3]" >
   <button (click)="click(item)">button</button>
</div>
<button (click)="showmeAll()">button</button>

@ViewChildren('item')items:QueryList<ElementRef>
click(item)
{
   console.log(item.innerHTML)
}
showmeAll()
{
  this.items.forEach(x=>{
    console.log(x.nativeElement.innerHTML)
  })
}

Обновление ну,

Прежде всего, мы немного изменим ваше. HTML, посмотрите, что я выхожу из "formArrayName" из * ngFor и использую тот же «referenceVariable» «tabset», и я добавляю свойства [tabId] ко всем нашим вкладкам

<div formArrayName="campaign_lines_array">
  <div  class="accordion-container col-sm-10 col-12"
      *ngFor="let item of add_iroForm.get('campaign_lines_array').controls;let i = index">
     <nb-tabset #tabset id="acceptable+{{i}}">
       <nb-tab tabTitle="Comments" #cTab1 [tabId]="'tab0-'+i">                              
       </nb-tab>
       <nb-tab tabTitle="Comments" #cTab2 [tabId]="'tab1-'+i">                              
       </nb-tab>
       <nb-tab tabTitle="Comments" #cTab3 [tabId]="'tab2-'+i">                              
       </nb-tab>
     </nb-tabset>
   </div>
</div>

Мы также можем использовать ViewChildren для получения вкладок

@ViewChildren('tabset',{read:NbTabsetComponent)items:QueryList<NbTabsetComponent>

или даже мы можем использовать

@ViewChildren(NbTabsetComponent)items:QueryList<NbTabsetComponent>

Но, если вы видите API TabsetComponents , вы увидите, что мы можем сделать несколько вещей с помощью TabSets. (спросите только о routerParam). Но интерес представляет API NbTabComponent. Итак, лучше получить все вкладки, используя viewChildren

  @ViewChildren(NbTabComponent) tabs:QueryList<NbTabComponent>

Итак, у нас есть все вкладки в переменной tabs , это позволяет нам, например, при щелчке функции, активировать все "tab2", или сделайте активным первую вкладку второго tabset

  click()
  {
    this.tabs.forEach(x=>{
      x.active=x.tabId.startsWith("tab1")
    })
  }
  click2(index)
  {
    this.tabs.filter(x=>x.tabId.endsWith("-"+index)).forEach(x=>{
      x.active=x.tabId.startsWith("tab0")
    })
  }

Update2 , у нас может быть функция активировать вкладку tabset

   setActiveTab(indexTabSet,indexTab)
   {
        this.tabs.filter(x=>x.tabId.endsWith("-"+indexTabSet)).forEach(x=>{
          x.active=x.tabId.startsWith("tab"+indexTab+"-")
        })
   }

A Пример дурака