如何在 onclick 事件中获取角度 4 的跨度值？答案

【问题标题】：how to get span value in angular 4 in onclick event?如何在 onclick 事件中获取角度 4 的跨度值？
【发布时间】：2020-01-16 04:45:54
【问题描述】：

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

组件.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>

组件.ts

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

我想通过单击十字按钮获取每个 li 元素的跨度值，以便我可以删除该特定标签。但我在控制台中输入undefind。

任何帮助都太明显了。

【问题讨论】：

什么是“跨度值”？
查看stackoverflow.com/questions/45757633/…

标签： angular typescript angular2-template

【解决方案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(...) 方法。如果传值，首先需要在数组中找到该值，然后才能删除，如果传下索引，马上就知道要删除哪个数组项。

【讨论】：

谢谢@Gunter。它正在工作。我是 Angular 4 的新手。:) 再次感谢。
@KULDEEPBISEN 如果答案解决了您的问题，请选择它以关闭您的问题

【解决方案2】：

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

<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;
}

【讨论】：