访问elementRef在点击事件角

Question

我在组件定义字符串列表，它的渲染鉴于这样的：

<span class="one" (click)='do($event, index, item)' 
*ngFor="let item of result;let index = index" >{{item}} </span> 

后的每个项目点击我希望该项目后添加div元素：

clickedSpan.insertAdjacentHTML('beforeend', '<div >Hi!</div>'); 

如何访问elementRef in do函数？或者是否有其他解决方案来处理由ngFor渲染的渲染跨度？

Answer 1

我模板，你可以在span标签创建一个变量，如“#addDivElement”

您可以通过使用@ViewChild访问组件这些变量（“addDivElement”）和你可以根据需要渲染HTML元素

从'@ angular/core'导入{Component，ViewChild，ElementRef，Renderer};

@Component（{ 选择： '我的应用程序内'， templateUrl： '/app/angular/app.angular.core.html' }） 出口类AppComponent {

@ViewChild('addDivElement') 
public addElement: ElementRef; 

public constructor(private rendere: Renderer) { 

} 

public arrayData = ["Item1", "Item2", "Item3"]; 

public doSomething(event, index, item) { 
    this.addElement.nativeElement.insertAdjacentHTML('beforeend', '<div class="two">two</div>'); 

} 

}

Answer 2

试试这个

 do(event, index, item) { 
      this.result.splice(index, 0, 'Hi!'); 
     }