[英]How to get elementRef in fromArray in angular
How to access element ref from from array.如何从数组访问元素引用。 Like #cTab5.
像#cTab5。 I access the #cTab5 with viewchild in ts.
我在 ts 中使用 viewchild 访问 #cTab5。 but don't know how to access with form array.
但不知道如何使用表单数组访问。
@ViewChild("cTab5", { static: false }) cTabE5: NbTabComponent;
this.campaignLinesAarray().at(Index).get("cTabE5");
<nb-tab tabTitle="Comments" #cTab5>
</nb-tab>
actually i want acces reference variable with formArray.实际上我想要使用formArray访问引用变量。 My html like below
我的 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>
if you has a reference variable in a *ngFor, you need use -in code- @ViewChildren , if you need use in .html use the variable, Angular take account of this, eg如果你在 *ngFor 中有一个引用变量,你需要使用 -in code- @ViewChildren ,如果你需要在 .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)
})
}
Update well,好好更新,
First of all, we are change a bit your .HTML, see that I get out the "formArrayName" from the *ngFor and use the same "referenceVariable" "tabset", and I add the properties [tabId] to all our tabs首先,我们对您的 .HTML 进行了一些更改,看到我从 *ngFor 中取出“formArrayName”并使用相同的“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>
We can use also ViewChildren to get the tabsets我们也可以使用 ViewChildren 来获取标签集
@ViewChildren('tabset',{read:NbTabsetComponent)items:QueryList<NbTabsetComponent>
or, even we can use或者,即使我们可以使用
@ViewChildren(NbTabsetComponent)items:QueryList<NbTabsetComponent>
But, if you see the API of TabsetComponents you see that we can do a few things with the TabSets.但是,如果你看到TabsetComponents的API,你就会发现我们可以用 TabSets 做一些事情。 (only ask about routerParam).
(只询问 routerParam )。 But the interest is the API of NbTabComponent.
但有趣的是 NbTabComponent 的 API。 So, better get all the tabs using a viewChildren
因此,最好使用 viewChildren 获取所有选项卡
@ViewChildren(NbTabComponent) tabs:QueryList<NbTabComponent>
So we has all the tabs in the variable tabs , this allow us, eg in a function click, make active all the "tab2", or make active the first tab of the second tabset所以我们有变量 tabs 中的所有选项卡,这允许我们,例如在函数单击中,激活所有“tab2”,或激活第二个选项卡集的第一个选项卡
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 we can has a function to active a tab of a tabset Update2我们可以有一个功能来激活标签集的标签
setActiveTab(indexTabSet,indexTab)
{
this.tabs.filter(x=>x.tabId.endsWith("-"+indexTabSet)).forEach(x=>{
x.active=x.tabId.startsWith("tab"+indexTab+"-")
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.