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. vue 发送ajax请求

    一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...

  2. obj 格式注意事项

    用Adreno Profiler分析图形效果的实现过程时,需要将特效涉及到的模型导出,以便进行多角度的详细查看,结果发现Adreno Profiler导出模型的功能有bug,总是报错并生成一个残缺的. ...

  3. centos Permission denied: make_sock: could not bind to address

    CentOS 下启动Httpd 失败,报 (13)Permission denied: make_sock: could not bind to address [::]:8000 因为 小于1024 ...

  4. ctags高级用法

    1.ctags -R 有个问题,成员变量没有包含在里面.所以自动完成对象的成员时没有提示.解决办法:$ctags -R --fields=+iaS --extra=+q *–fields=[+|-]f ...

  5. Atitit. 悬浮窗口的实现 java swing c# .net c++ js html 的实现

    Atitit. 悬浮窗口的实现 java swing c# .net c++ js html 的实现 1. 建立悬浮窗口引用代码 1 1.1. 定义悬浮窗口,设置this主窗口引用,是为了在悬浮窗口中 ...

  6. struts2拦截器的实现原理及源码剖析

    拦截器(interceptor)是Struts2最强大的特性之一,也可以说是struts2的核心,拦截器可以让你在Action和result被执行之前或之后进行一些处理.同时,拦截器也可以让你将通用的 ...

  7. jvm垃圾收集器之Throughput GC

    呃.HotSpot VM的GC组老人之一Jon Masamitsu很久之前就写过blog讲解这个:https://blogs.oracle.com/jonthecollector/entry/our_ ...

  8. java中,scala中代码检测当前环境的版本

    //来自spark源码// sparkContext初始化的时候写着  private def warnDeprecatedVersions(): Unit = { val javaVersion = ...

  9. PHP——0126最初

    数据库mydb 表格info,nation 实现效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  10. curses库--libncurses5-dev--游标移动及屏幕的显示

    curses是一个在Linux/Unix下广泛应用的图形函数库.,作用是可以绘制在DOS下的用户界面和漂亮的图形. curses的名字起源于"cursor optimization" ...