如何在onclick 事件中获取angular 4 中的span 值？

Question

我正在研究 angular 4，我正在尝试实现可以通过单击十字按钮删除标签的功能。所以下面是我的代码：

Component.hmtl

<ul id="ul_top_hypers">
      <li *ngFor="let hero of technologies">
          <span class="badge badge-pill badge-primary"  >{{ hero }}<i class="fa fa-cross-circle-right fa-lg" (click)="removeTag1($event)"></i></span>
        </li>
 </ul>

Component.ts

 removeTag(event: any) {
    console.log(event.target.parentNode.value);
    console.log(event.target.value);
   }

我想通过单击交叉按钮获取每个 li 元素的跨度值，以便我可以删除该特定标记。但是我正在控制台中 undefind。

任何帮助都太明显了。

Answer 1

我只使用索引

  <ul id="ul_top_hypers">
      <li *ngFor="let hero of technologies;let i=index">
          <span class="badge badge-pill badge-primary"  >{{ hero }}<i class="fa fa-cross-circle-right fa-lg" (click)="removeTag1(i)"></i></span>
        </li>
 </ul>

通过添加 ;let i=index 索引变得可用并且
(click)="removeTag1(i)" 将索引传递给 removeTag(...) 方法。如果传递值，首先需要在数组中找到该值，然后才能删除它，如果传递索引，则立即知道要删除哪个数组项。

Answer 2

我从我的 mediawiki 获取信息并以 div 的形式显示在 angular2+ html 中。

<div class="wiki" (click)="getWikiPage($event)">
    <div [innerHtml]="pageContent"> </div>
</div>

mediawiki 生成的 TC 如下所示：

<span class="toctext">Welcome</span>

在组件中我得到了关于跨度值的信息：

getWikiPage(e) {
    e.stopPropagation();
    if (e.srcElement.nodeName == 'SPAN') {
      console.log('Wiki TC span value: ', e.srcElement.innerHTML)
    }
    return false;
}

如何在onclick 事件中获取angular 4 中的span 值？

how to get span value in angular 4 in onclick event?

typescript

angular2-template

angular