<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center"> <h1>
Welcome to {{ title }}
</h1> <h1>循环数据 显示数据的索引(key)</h1> <ul> <li *ngFor="let item of list;let key=index;">
{{key}}---{{item.title}}
</li>
</ul>
</div> <router-outlet></router-outlet>
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Angulardemo';
public list:any[]=[
{
"title":'我是数据1'
},
{
"title":'我是数据2'
},
{
"title":'我是数据3'
}
];
}

效果:

angular 中数据循环 *ngFor的更多相关文章

  1. angularcli 第三篇(数据循环*ngFor、条件判断*ngIf)

    1.数据循环 *ngFor (1)普通循环 <ul> <li *ngFor = "let item of list" > {{ item }} </l ...

  2. Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...

  3. 五、Angular定义字段、绑定字段、获取数据、对象获取数据、*ngFor循环获取数据,自定义方法、*ngIf条件判断、双向数据绑定

    1.定义属性 2.绑定属性.绑定html中 3.循环获取数据 编写的时候没有注意,第二个循环 i 需要改成 {{i}} ,这样才会显示 出效果 4.自定义方法 变量名截图省略 5.*ngIf条件判断 ...

  4. 对lua表中数据按一定格式处理,循环

    function putStartCard(handCard) function dataDeal(array,a,b,c) cclog("进入datadeal=============== ...

  5. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  6. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  7. Angular 中的数据交互(get jsonp post)

    一.Angular get 请求数据 Angular5.x 以后 get.post 和和服务器交互使用的是 HttpClientModule 模块. 1.在 app.module.ts 中引入 并注入 ...

  8. Angular中的数据绑定

    (1)HTML绑定:{{}} (2)属性绑定:[] 注意:属性绑定通常赋值为变量,如果赋值为常量(如字符串常量) 必须用引号括起来,如<img [src]="'../../assets ...

  9. angular源码分析:angular中脏活累活承担者之$parse

    我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...

随机推荐

  1. SUSE Ceph RBD Mirror - Storage 6

    Ceph采用的是强一致性同步模型,所有副本都必须完成写操作才算一次写入成功,这就导致不能很好地支持跨域部署,因为如果副本在异地,网络延迟就会很大,拖垮整个集群的写性能.因此,Ceph集群很少有跨域部署 ...

  2. BZOJ 2321 星器

    星器 思路: 势能分析法. 假设每颗星星的势能为\(x^2+y^2\) 那么对于一行的两颗星星\((i, j), (i, k), j < k\) 它转移到\((i, j+1), (i, k-1) ...

  3. linux网络编程之posix信号量与互斥锁

    继上次学习了posix线程之后,这次来讨论一下posix信号量与互斥锁相关的知识: 跟posix消息队列,共享内存的打开,关闭,删除操作一样,不过,上面的函数是对有名信号量进行操作,通过man帮助可以 ...

  4. P2161 [SHOI2009]会场预约[线段树/树状数组+二分/STL]

    题目描述 PP大厦有一间空的礼堂,可以为企业或者单位提供会议场地.这些会议中的大多数都需要连续几天的时间(个别的可能只需要一天),不过场地只有一个,所以不同的会议的时间申请不能够冲突.也就是说,前一个 ...

  5. 《AlwaysRun团队》第三次作业:团队项目的原型设计

    <AlwaysRun团队>第三次作业:团队项目的原型设计 项目 内容 这个作业属于哪个课程 [任课教师博客主页链接](https://home.cnblogs.com/u/nwnu-dai ...

  6. Selenium(十五)cookie

    有时候我们需要验证浏览器中是否存在某个 cookie,因为基于真实的 cookie 的测试是无法通过集成测试完成的.WebDriver 提供了操作 Cookie 的相关方法可以读取.添加和删除 coo ...

  7. tomcat启动之后,Chrome浏览器可以访问,IE不行(IE无法访问8080 端口)

    方法简单粗暴,在windows中关闭IE服务,然后再重新安装服务. 请注意,在输入框输入:  http://localhost:8080/myproject 不要直接输入localhost:8080/ ...

  8. vue2 父链,子组件索引及父子通信的props对象写法

  9. 2019 杭电多校第八场 HDU - 6665 Calabash and Landlord 两矩形分平面

    题意 给出两个矩形,问这两个矩形把平面分成了几部分. 分析 不需要什么高级技能,只需 “简单” 的分类讨论. (实在太难写了,对拍找出错误都不想改 推荐博客,其中有个很好的思路,即只讨论答案为2,3, ...

  10. java application指的到底是什么?

    在Java语言中,能够独立运行的程序称为Java应用程序(Application).Java语言还有另外一种程序——Applet程序.Applet程序(也称Java小程序)是运行于各种网页文件中,用于 ...