角形，无法在html中找到元素

Question

由于某种原因，尽管使用document.getElementByID ，但我却无法获得html中list元素的值，并且它具有相同的ID。 它声称该元素是未定义的。 这是代码：

fileupload.component.ts：

ngOnInit() {  
  var x = document.getElementById('lemons'); 
  if(x){
    console.log('it does exits')
    x.addEventListener('click', function(e:any){
      console.log(x.innerHTML);
    });
  }
}

fileupload.component.html：

<div class="row" id="filesDisplay">
<div class="col-md-4" id="files">
    <li *ngFor="let child of tree" id="lemons">
            {{child}}
    </li>
</div>

Answer 1

* ngFor指令是在OnInit钩子之后处理的，因此，如果要获取使用* ngFor生成的元素，应使用：

ngAfterViewInit() { }

另外，您正在复制ID，这意味着它只会选择第一个元素。

生命周期-钩角指南

编辑：添加了角度指南

Answer 2

您不能为所有li重复相同的html id。 您需要在id上添加索引以进行区分。

 <div class="row" id="filesDisplay">
  <div class="col-md-4" id="files">
   <li *ngFor="let child of tree" (click)="test(child)">
        {{child}}
   </li>
</div>

在javascript中，您需要相应地提取ID。

  ngOnInit() {  
   test(res) {
     // perform your logic here..
    } 
}

您无需在这里使用jquery，而angular可以满足DOM操作的所有需求。