のアクセスは、角度

Question

でのクリックイベントに私は、コンポーネント内の文字列のリストを定義し、それは次のようにビューでのレンダリングだ：各項目は、私は、その項目の後のdiv要素を追加するをクリックした後

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

：

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

にアクセスするにはどうすればいいですかdoに機能しますか？またはngForでレンダリングされたレンダリングされたスパンを操作する他のソリューションはありますか？

Answer 1

を試してみてHTML要素を必要に応じてレンダリングできます

'Component、ViewChild、ElementRef、Renderer}を' @ angular/core 'からインポートします。

@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

私はあなたがあなたが@ViewChild（「addDivElement」）を使用して、コンポーネントでこれらの変数にアクセスすることができspanタグで

を「#addDivElement」のように一つの変数を作成できるテンプレートこの

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