Javascript 在Angular 2中加载所有数据后自动单击元素

我试图弄清楚如何在加载所有数据后自动触发某个元素上的单击事件

html文件中的代码如下所示：

<div *ngFor="let location of locations; let i = index;" class="location-wrapper" (click)="onSelect($event, i); $event.stopPropagation();">
    <div class="location">{{ location }}</div>
</div>

{{location}}

onSelect（）

方法正在对与当前位置相关的内容进行一些扩展

我试图实现的是，我希望每次进入此页面时，可以自动单击

*ngFor

的第一个元素，以显示与之相关的内容

或者我们可以用其他类似的方法来实现它

我试过几种方法， 比如在

window.on（'load'，function（）{//blabla}）中放入一些代码

或者使用
ngAfterViewInit（）
和
ngAfterViewChecked（）
，这两种方法都不能很好地工作。
至少可以用两种方法来完成。第一种是老式的javascript
click（）
。第二种方法是使用组件逻辑，只需创建一个变量，如
selectedLocation
，它将保存当前展开的
index
或
Object
。别忘了给它添加初始值，使其在加载页面后可见

Javascript dispatchEvent（非
角度友好解决方案
）
我们只需要抓取我们的物品并使用
click（）
函数。就这样。要获取元素，我们可以使用基本的javascript方法document.getElementById（elementId）”或使用
模板变量

<div 
   [id]="'location_' + i" <!-- For biding with document.getElementById -->
   #locationPanel <!-- For biding with template variable -->  
   *ngFor="let location of locations; let i = index;" class="location-wrapper" (click)="onSelect($event, i); $event.stopPropagation();">
    <div class="location">{{ location }}</div>
</div>

在afterViewInit中，只需调用
this.openFirstLocation（）；

请注意，它不是
Angular
友好的，因为
Angular
不喜欢直接干扰
DOM
。然而，只要我们不改变结构中的任何内容，那么一切都应该很好，但我们应该避免使用纯javascript操作DOM

请注意，关于使用
@ViewChild
和
文档。*方法
，也需要注意

当需要直接访问DOM时，请使用此API作为最后手段。请改用Angular提供的模板和数据绑定。或者，您可以查看Render2，它提供了即使不支持直接访问本机元素也可以安全使用的API。
依赖直接DOM访问会在应用程序层和渲染层之间产生紧密耦合，这将使您无法将两者分离并将应用程序部署到web worker中

从
角度文档

您至少可以通过两种方式来实现这一点。第一种是老式的javascript
click（）
。第二种方法是使用组件逻辑，只需创建一个变量，如
selectedLocation
，它将保存当前展开的
索引或
对象。不要忘记向其添加初始值，以使其在加载页面后可见

Javascript dispatchEvent（非
角度友好解决方案
）
我们只需要抓取我们的项目并使用
click（）
函数。就是这样。要抓取元素，我们可以使用基本的javascript方法document.getElementById（elementId）”或使用
模板变量

<div 
   [id]="'location_' + i" <!-- For biding with document.getElementById -->
   #locationPanel <!-- For biding with template variable -->  
   *ngFor="let location of locations; let i = index;" class="location-wrapper" (click)="onSelect($event, i); $event.stopPropagation();">
    <div class="location">{{ location }}</div>
</div>

在afterViewInit中，只需调用
this.openFirstLocation（）

请注意，它不是
Angular
友好的，因为
Angular
不喜欢直接干扰
DOM
。然而，只要我们不改变结构中的任何东西，那么一切都应该是好的，但是我们应该避免使用纯javascript操作dom

请注意，关于使用
@ViewChild
和
文档。*方法
，也需要注意

当需要直接访问DOM时，使用此API作为最后手段。改用Angular提供的模板和数据绑定。或者，您可以看看RenderR2，它提供了API，即使在不支持直接访问本机元素的情况下也可以安全使用。
依赖直接DOM访问会在应用程序层和渲染层之间产生紧密耦合，这将使您无法将两者分离并将应用程序部署到web worker中

从
角度文档

您应该在此处使用展开、折叠面板来显示更多数据。并将第一个div设为活动面板。您应该在此处使用展开、折叠面板来显示更多数据。并将第一个div作为活动面板。我试图将
#locationPanel
添加到包装器div，但当我尝试在
ngAfterViewInit（）中的
console.log（locationPanel.first）
时，它会显示
未定义的
。奇怪的是，当我只做
console.log（locationPanel）
时，它有
first
属性，并指向我想要的正确div。这就是加载DOM元素的顺序和执行
ngAfterViewInit（）
的时间的问题吗？我试图将
\locationPanel
添加到包装器div，但当我尝试在
ngAfterViewInit（）
中添加
console.log（locationPanel.first）
时，它显示了
未定义的
。奇怪的是，当我只做
console.log（locationPanel）
时，它有
first
属性，并指向我想要的正确div。这是否是加载DOM元素的顺序和执行
ngAfterViewInit（）的时间的问题