在 Angular 中的点击事件中访问 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>');

如何在函数do访问元素引用？或者是否有其他解决方案来操作 ngFor 渲染的渲染跨度？

Answer 1

试试这个

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

Answer 2

我可以在

span 标签中创建一个变量，例如"#addDivElement">

您可以使用以下命令在组件中访问这些变量

@ViewChild('addDivElement') and you can do render the HTML element as you want 
import { Component, ViewChild, ElementRef, Renderer} from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: '/app/angular/app.angular.core.html'
})
export class 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>');
    }
}