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

Question

我正在尝试从 ngOninit 的查询列表中触发元素引用的单击事件。但是我收到了 forEach 未定义的错误消息。我不知道为什么我会收到这样的错误消息。我想触发 test2 的单击事件。怎么做？

演示：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 {&nbsp;ngAfterViewInit() {&nbsp; this.elList.forEach((item, index) => {&nbsp;&nbsp; &nbsp; &nbsp; if (index === (this.newindex - 1)) (item.nativeElement as HTMLElement).click();&nbsp; &nbsp; &nbsp; console.log('works')&nbsp; &nbsp; });}如果您在控制台中看到作品，它现在应该可以工作了！