angular 中的*ngFor指令的使用

<ul>

  <li *ngFor="let item in items">{{item}}</li>

</ul>

有时候需要获取index,比如删除本行li列表的时候需要根据index来确定删的是哪个

<ul>
<li *ngFor="let item of items; let i = index">
{{item}}
<i (click)="deleteThis(i)">x</i>
</li>
</ul>
private items = ["张三","李四","王五","赵六","李七"];

deleteThis(index){
console.log(index);
this.items.splice(index,1) //根据数组的index来删除对应的元素
}

把列表遍历出来显示到页面,点击每个列表对应的x就可以删除本条记录

angular4 *ngFor获取index的更多相关文章

  1. 排序并获取index的顺序

    //排序并获取index的顺序:4,7,2,9-->9,7,4,2-->4,2,1,3 Array.prototype.getIndex=function(){ var orderLeng ...

  2. elementui el-upload 在v-for里使用时 如何获取index

    <div v-for = 'item in list'> <div @click="getImageTypeIndex(index)"> <el-up ...

  3. java增强for循环中获取index

    java增强for循环中获取index http://rensanning.iteye.com/blog/2003205

  4. [Angular 2] *ngFor with index

    Let's see how to track index when we use 'ngFor: <li *ngFor="#hero of heros | async, #i = in ...

  5. Thymleaf中th:each标签遍历list如何获取index

    简单介绍:传递给后台一个String类型的list,需要获取到list的每一个元素,然后进行筛选,得到正确的文本值,看代码就明白了 代码: //后台java代码//failList是一个String类 ...

  6. 微信小程序获取index索引值的方法

    功能:点击某一项,底部出现粉色边框 首先需要通过 bindtap 为每一个item项绑定一个点击事件,其次需要添加自定义属性 data-* = {{index}} ,以便在函数中获取到被点击item项 ...

  7. Thymeleaf中each标签遍历list如何获取index

    <tr th:each="user,userStat:${users}">userStat是状态变量,有 index,count,size,current,even,o ...

  8. layer弹出层 获取index

    function closelayer(){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index ...

  9. java8在Stream的forEach操作时获取index

      import java.util.Objects; import java.util.function.BiConsumer; /** * * @author yangzhilong * @dat ...

随机推荐

  1. centos-7 charpter one

    一.system locale 的介绍: 系统的区域设置被保存在/etc/locale.conf 这个文件中,systemd在启动的时候会去读取它:所有用户和程序的区域设置都继承自它, 当然用户&am ...

  2. laravel模型中打印sql语句

    模型中有个 ->toSql() 可以打印sql语句

  3. MySQL主从配置的一些总结

    有很多朋友做了mysql主从也有一段时间了,但是有时候也走了不少弯路,时间也浪费了不少,主要问题是没有查阅其他的主机配置的相关资料,而仅仅是看了配置文档,下面是作者对主从配置的一些总结. AD: 20 ...

  4. blender, 旋转和平移视图

    旋转视图:MMB(鼠标中键) 平移视图:shift+MMB

  5. ajax处理select下拉表单

    $('#gameid').change(function() { var gameid = $(this).val(); if (this.value != '') { $.ajax({ url: ' ...

  6. Android Camera API/Camera2 API 相机预览及滤镜、贴纸等处理

    Android Lollipop 添加了Camera2 API,并将原来的Camera API标记为废弃了.相对原来的Camera API来说.Camera2是又一次定义的相机 API,也重构了相机 ...

  7. Google 商店:您的应用静态链接到的 OpenSSL 版本有多个安全漏洞。建议您尽快更新 OpenSSL

    安全提醒 您的应用静态链接到的 OpenSSL 版本有多个安全漏洞.建议您尽快更新 OpenSSL. 在开头为 1.0.1h.1.0.0m和 0.9.8za的 OpenSSL 版本中这些漏洞已得到修复 ...

  8. lua错误收集

    这里放一些我遇到的lua错误,希望大家分享一些错误给我,统一放在这里. 1.lua表的引用传值 上面的代码运行后会发现t2[2],t2[3]表里的内容也被删除了,实际上它们 与t2[1]表里的内容都是 ...

  9. PHP——修改数据库1

    主页面——0126.php 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  10. linux 安装开启SNMP协议,最下面是yum安装

    Linux SNMP 以下的示例采用SUSE10 Linux环境,但它同样适用于其它Linux发行版. 编译和安装 首先我们需要下载Net-SNMP的源代码,选择一个版本,比如5.7.1,地址如下: ...