如何在Angular中获取元素值答案

【问题标题】：How to get element value in Angular如何在Angular中获取元素值
【发布时间】：2019-02-23 12:36:34
【问题描述】：

我有如下元素：

<li class="someClass">value1<span>value2</span></li>

上面的列表元素是通过vanila js生成的，所以点击事件绑定到它如下：

const list = Array.from(document.querySelectorAll(".someClass"));
  list.forEach(ele => ele.addEventListener('click', this.getListValue.bind(this)));

getListValue(element)
{
 console.log('output', element.target.innerText)
}

在输出中我在 IE 上得到：

output value1 value2

铬：

 output value1

我只需要 value1。有没有办法在给定的场景中获取 li 标签的值？

谢谢！

【问题讨论】：

为什么还要从模板中读取元素？
@Amadán 我需要元素的价值来做一些进一步的行动。在我的例子中 li 元素是搜索输入的下拉菜单，当用户点击一个 li（即下拉菜单中的一个项目）时，我想获取该值并在下一页显示一些结果。
如果你使用 Angular(-JS)，那么使用 ng-model 并且不要从 HTML 中读取任何内容。
@Justinas 我正在使用 Angular (5.2)。而且我无法添加 [(ngModel)] 作为使用 vanila js 代码创建多个 li。
@Simer 你为什么要这么做？创建多个
使用 *ngFor!

【解决方案1】：

您正在向 DOM 添加元素，然后您想使用 vanilla JS 再次读取这些元素？我很难理解这与是否使用 Angular 有什么关系，以及为什么你想要这个......

Angular 明确地不鼓励自己弄乱原生元素。另外，你在生成元素时已经有了值，为什么还要再读一遍呢？如果您仍然坚持这种方法，那么您最好在生成 html 时添加 on click，您应该已经有了 value1。

无论如何，假设您的方法确实有一个有效的用例，并且不只是将复制粘贴的代码粘合在一起而完全忽略 Angular 概念（或任何概念），请查看： Is there a way to get innerText of only the top element (and ignore the child element's innerText)?

【讨论】：