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. ubuntu下安装自动补全YouCompleteMe

    一.安装预备软件.#vim要带python2.7的支持,curl是下载插件必须用到的软件,还有git apt install vim-nox-py2 curl git #安装python头文件 apt ...

  2. android.animation(3) - ValueAnimator-ofObject(TypeEvaluator evaluator, Object... values)

    一.ofObject()概述 前面我们讲了ofInt()和ofFloat()来定义动画,但ofInt()只能传入Integer类型的值,而ofFloat()则只能传入Float类型的值.那如果我们需要 ...

  3. CXCommon.h工具类

    #ifndef __XCOMMON_H__ #define __XCOMMON_H__ /******************************************************* ...

  4. Java线程停止interrupt()方法

    程序是很简易的.然而,在编程人员面前,多线程呈现出了一组新的难题,如果没有被恰当的解决,将导致意外的行为以及细微的.难以发现的错误.在本篇文章中,我们针对这些难题之一:如何中断一个正在运行的线程. 中 ...

  5. Taking A Fresh Look At What Open Source API Management Architecture Is Available

    http://apievangelist.com/2014/10/05/taking-a-fresh-look-at-what-open-source-api-management-architect ...

  6. 466. Count Linked List Nodes【Naive】

    Count how many nodes in a linked list. Example Given 1->3->5, return 3. 解法一: /** * Definition ...

  7. jmap 查看内存使用直方图

    jps   -- 查看进程号 jmap -histo pid  查看堆内存中的对象数目.大小统计直方图, 如果带上live则表示先进行一次fullgc 再统计内存使用情况,如下: jmap -hist ...

  8. C#和sqlserver中生成新的32位GUID

    C#中用Guid.NewGuid().ToString() Sql中用NEWID() 以上方法生成的是36位的GUID,如果需要转换成32位,则需要替换掉其中的'-'字符. Sql中的方法:repla ...

  9. 解决eclipse启动tomcat报错:Could not load the Tomcat server configuration at \Servers\Tomcat v6.0 Server at localhost-config. The Servers project is closed.

    报错信息已经说的很清楚了:The Servers project is closed.如图 打开即可: 另外,如果你修改了Servers project的name(比如说把这里的Servers改成了X ...

  10. android 获取屏幕高度和宽度 的方法

    我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现.下面就介绍讲一讲如何获取屏幕的物理尺寸 下面的代码即可获取屏幕的尺寸.    在一个Activity的onC ...