Angular list列表的事件响应实现

简介: Angular list列表的事件响应实现

语法:

<h2>My Heroes</h2>
<ul class="heroes">
    <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

image.png

(click)告诉Angular,监听li元素的点击事件。当用户点击li时,Angular执行onSelect(hero).

新建一个property selectedHero, 用于存储选中的hero:image.png

测试效果:

image.png


相关文章
|
10天前
|
XML 存储 JavaScript
DOM 节点列表(Node List)
XML DOM允许访问XML文档的每个节点,提供三种访问方法:getElementsByTagName()、循环遍历和导航节点关系。getElementsByTagName()返回一个节点列表,类似于数组,可用于获取特定标签名的节点。例如,加载&quot;books.xml&quot;后,`xmlDoc.getElementsByTagName(&quot;title&quot;)`会获取所有&lt;title&gt;元素,存储在变量x中。通过索引如x[2]可访问第三个&lt;title&gt;元素,注意索引从0开始。后续章节将进一步探讨节点列表(Node List)。
|
1天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,允许遍历和处理节点。例如,加载&quot;books.xml&quot;到`xmlDoc`,通过`getElementsByTagName(&quot;title&quot;)`获取所有标题节点,然后使用循环输出每个&lt;title&gt;元素的文本内容。
|
5天前
|
XML 数据格式
节点列表长度(Node List Length)
`NodeList`对象自动更新,其`length`属性表示列表中节点数量。例如,加载&quot;books.xml&quot;后,`getElementsByTagName(&#39;title&#39;).length`返回`4`。此属性可用来遍历列表,如示例所示,遍历所有`&lt;title&gt;`元素并打印其文本内容:Everyday Italian, Harry Potter, XQuery Kick Start, Learning XML。
|
5天前
|
Python
【Python 基础】列表(list)和元组(tuple)有什么区别?
【5月更文挑战第6天】【Python 基础】列表(list)和元组(tuple)有什么区别?
|
6天前
|
XML 数据格式
节点列表长度(Node List Length)
`Node List`对象自动更新,其`length`属性表示列表中节点数量。在给定示例中,代码加载&quot;books.xml&quot;,并利用`getElementsByTagName(&#39;title&#39;)`获取&lt;title&gt;元素的数量,结果为4。`length`也可用于遍历列表,如示例所示,遍历并打印所有&lt;title&gt;元素的文本内容:Everyday Italian, Harry Potter, XQuery Kick Start, Learning XML。
|
9天前
|
XML JavaScript 数据格式
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,例如在XML文档中,通过`getElementsByTagName()`获取的所有`&lt;title&gt;`元素的数量。可以遍历这个列表,如示例所示,使用`for`循环访问并输出每个节点的文本值。在提供的实例中,代码加载&quot;books.xml&quot;,然后获取并打印所有&lt;title&gt;元素的子节点值。
|
19天前
|
存储 索引 Python
多数pythoneer只知有列表list却不知道python也有array数组
多数pythoneer只知有列表list却不知道python也有array数组
26 0
|
22天前
四种解决”Arg list too long”参数列表过长的办法
这些方法都可以帮助你避免因参数列表过长而导致的错误。选择方法取决于具体情况和需求。
12 0
|
26天前
|
索引 容器
06-python数据容器-list列表定义/list的10个常用操作/列表的遍历/使用列表取出偶数
06-python数据容器-list列表定义/list的10个常用操作/列表的遍历/使用列表取出偶数
|
1月前
|
Python
python教程:二维列表(list)初始化
python教程:二维列表(list)初始化
10 0

热门文章

最新文章