[Angular 2] *ngFor with index

【[Angular 2] *ngFor with index】的更多相关文章

[Angular 2] *ngFor with index

Let's see how to track index when we use 'ngFor: <li *ngFor="#hero of heros | async, #i = index"> <hero-item [hero]="hero" (changed)="thisHero = $event;" [index]="i"></hero-item> </li> #i = i…

heros.ts: import {Component} from "@angular/core"; const HEROES = [ {id: 1, name:'Superman'}, {id: 2, name:'Batman'}, {id: 5, name:'BatGirl'}, {id: 3, name:'Robin'}, {id: 4, name:'Flash'} ]; @Component({ selector:'heroes', styleUrls: [ 'heroes.c…

angular4 *ngFor获取index

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)=&q…

Angular 学习笔记 (组件沟通的思考)

组件指令间经常需要沟通我们知道的方式有 input output service inject viewchild contentchild templateRef template variable 但是哪种情况下用哪种呢 ? 思考 1, input -> input -> input 这种一层层传进去是否是 ok 的 ? <mat-calendar cdkTrapFocus [id]="datepicker.id" [ngClass]="datepic…

手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎Star) 引言 "他在正午.黄昏,在一天里的许多时刻去感受它.记录它,结果也就让我们看到了那么多的不同.他描绘它的角度没变,但它的面目却极大地改变了." 19世纪著名的印象派画家莫奈,喜欢对着同一处景物,分别画出对象在不同时间,不同光线下的色彩变化. 比如不同季节的三株白杨: 比如一天中不…

开始学习Angular Mobile UI

介绍 Mobile AngularUI 可以让你使用Twitter Booostrap和Angular JS来开发混合移动App和桌面应用程序. 下面是是一些贯穿整个项目的步骤,我强烈的建议你去继续阅读,然后去阅读详情开始指导. 动过实例学习 Demo是一个学习Mobile Angular UI的一个很好的方式. 你可以从这里下载资源:https://github.com/mcasimir/mobile-angular-ui/tags. 打开下载好的文档浏览demo文件夹下面的文件如果你很熟…

为Angularjs ngOptions加上index解决方案

今天在Angularjs交流群中有位童学问道如何为Angular select的ngOptions像Angularjs的ngRepeat一样加上一个索引$index. 其实对于这个问题来说Angular本身并未提供$index之类的变量供使用.但是也不是说对于这个问题我们就没有解决方案. 把这个问题换成角度来看,我们所需要的就是js数组的下标,所以我们如果我们能够在对象上加入下标,使用表达式作为option的label就能解决了. 但是第一印象让我想起的是js数组本来就是一个key/value的…