触发单击嵌套循环 Angular ngFor 下的特定项目

问题描述

如何定位嵌套循环下的特定项

How to target on the specif item under the nested loop

<ul #parents *ngFor="let parent of parents">
     <li #child *ngFor="let child of parents.childGroup"> {{child.name}} </li>
<ul>

Ts 文件

Asper 我的代码我的目标是 parents[5].child[0] ，但它作为孩子的工作 parents[0].child[0]

Asper my code my target is parents[5].child[0] , but its working as child parents[0].child[0]

@ViewChildren('parents') parents : QueryList<ElementRef>
 @ViewChildren('child') child: QueryList<ElementRef>

this.parents.forEach((item, index) => {
if (index === 5 ) {
(this.child.find( (item , index) => index === 0 ).nativeElement as HTMLElement).click();
}


});

每个父母都有自己的孩子，这里的目标是根据所有孩子的索引计算的

Each parent has own children, Here target calculated based on all child index

如何解决这个问题?

推荐答案

您可以像这样在 html 元素中设置 dynamic id :

You can set dynamic id in html element like this:

<ul #parents *ngFor="let parent of parents">
     <li #child *ngFor="let child of parents.childGroup;let i=index" id="{{'child'+ i }}">
          {{child.name}}
    </li>
<ul>

然后从打字稿点击.

this.parents.forEach((item, index) => {
  if (index === 5 ) {
    document.getElementById("child" + index  ).click();
  }
});

这篇关于触发单击嵌套循环 Angular ngFor 下的特定项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！