angular - 如何在 onclick 事件中获取 Angular 4 的跨度值？

Question

我正在研究 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。

任何帮助都太明显了。

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(...) 方法。如果传递值，则首先需要在数组中找到该值，然后才能删除它，如果传递索引，则立即知道要删除哪个数组项。