使用angular 8 从查询列表触发元素引用的点击事件

Question

我正在尝试从 ngOninit.But 上的查询列表中触发元素引用的点击事件我收到 forEach 未定义的错误 message.I 不知道为什么我会收到这样的错误 message.I 想触发 test2.How 的点击事件吗？

演示：https://stackblitz.com/edit/angular-ivy-2spfo3?file=src/app/app.component.ts

ERROR
Error: Cannot read property 'forEach' of undefined

app.component.html:

<div *ngFor="let data of list; let i=index">

<div #el (click)="getVal(data.id)">{{data.name}} </div> 

</div>

app.component.ts:

@ViewChildren('el') elList: QueryList<ElementRef>
newindex=1;
list=[
  {
    name:"test1",
    id:1
  },
  {
    name:"test2",
    id:2
  },
  {
    name:"test3",
    id:3
  } 
]

getVal(id){
  alert("Trigger click for: test"+id);
}

ngOnInit(){ 
   this.elList.forEach((item, index) => { 
      if (index === (this.newindex - 1)) (item.nativeElement as HTMLElement).click();
    });
}

Answer 1

你的变量 elList 没有在你的代码中初始化或定义，我在你上面的代码中没有看到 elList，是不是不完整？

好的，看看你的 stackblitz 我发现了问题，你试图在视图尚未完成加载时访问视图对象，你应该在你的组件中实现 AfterViewInit，然后在这个方法中添加 foreach，如下所示：

export class AppComponent implements OnInit, AfterViewInit {

ngAfterViewInit() {
  this.elList.forEach((item, index) => { 
      if (index === (this.newindex - 1)) (item.nativeElement as HTMLElement).click();
      console.log('works')
    });
}

如果您在控制台中看到有效，现在应该可以正常工作了！

使用angular 8 从查询列表触发元素引用的点击事件

Trigger the click event for element reference from the query list using angular 8

javascript

typescript

angular7

angular8