Question

我正在使用API调用从数据库中获取数据，并以HTML循环遍历该数据以形成树结构。在循环时分配条件类。我想在html渲染完成后触发click事件。

我尝试了多个选择器，但是它们都不起作用。

这是我的TS代码。

this.reportService.getCampaignGroupList().subscribe(
    data => {
      this.campaignGroups = data;
      $('.toggle-row').trigger("click");
      var elements = document.getElementsByClassName("toggle-row");
      $.each(elements, function (index, value) {
      console.log(index);
      });

      $('.toggle-row').each(function () {
       console.log($(this));
      });
    },
    error => {
})

这是我的HTML代码。

<tr *ngFor="let cg of campaignGroups" attr.data-depth=" 
    {{cg.levelType}}" 
    class="{{cg.levelType == 0 ? 'level0: ''}}">
         <td><span class="{{cg.levelType == 0 ? 'toggle-row 
          collapse': ''}}"></span> {{cg.name}}
          </td>
          <td class="td-center">{{cg.budget | number : '1.2-2'}} 
          </td>
</tr>

我想在以html呈现api数据时触发click事件。在当我点击$('.toggle-row').trigger("click");时，浏览器控制台工作正常，但相同的代码在TS中不起作用。

Answer 1

首先，当您使用打字稿时，不应该在Angular中使用jQuery。

第二，根据角度页面生命周期的解决方案，您可以致电

ngAfterViewInit（）当页面完成渲染和绑定后。

export class AppComponent implements AfterViewInit {    

    ngAfterViewInit() {

    }
}

呈现动态生成的元素时触发点击事件

1 个答案: