在嵌套循环角ngFor对特定项目触发点击(Trigger click on specific ite

如何在特异性项目目标嵌套循环下

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

TS文件

阿斯皮尔我的代码我的目标是parents[5].child[0]但其作为儿童工作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();
}


});

每个家长都有自己的孩子，明确的目标，基础计算的所有子指数

如何解决这个问题呢？

Answer 1:

您可以在这样的HTML元素的动态ID：

<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();
  }
});

Answer 2:

你可以做到这一点没有ViewChild()裁判。

您可以在子组件上添加一个点击事件监听器，并通过它的参数。

<li *ngFor="let child of parent.children" (click)="handleClick(parent, child)">

然后相应地处理点击。

handleClick(parent, child){
  console.log(parent);
  if(this.parents[1] === parent && (parent.children.indexOf(child)) === 1 ){
    alert(`You clicked ${child} of parent ${parent.id}`)
  }
}

这里是一个演示

文章来源: Trigger click on specific item under nested loop Angular ngFor