<!--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. Windows Server 2008上网设置——IE

    IE安装设置 在 Windows Sever 2008 中打开 IE 浏览器时,IE 会出现[已启用 Internet Explorer 增强的安全配置]的提示信息. Windows Server 2 ...

  2. Python 包文件安装

    https://pypi.tuna.tsinghua.edu.cn/simple/ 清华源 https://pypi.doubanio.com/simple/ 豆瓣源 pip install -i h ...

  3. linux网络编程之socket编程(十)

    今天继续socket编程的学习,最近晚上睡觉都没有发热,没有暖气的日子还是种煎熬,快乐的十一也已经走来,幸福有暖气的日子也快啦,好了,回到正题~ ①close终止了数据传送的两个方向. ②shutdo ...

  4. P3197 [HNOI2008]越狱[组合数学]

    题目来源:洛谷 题目描述 监狱有连续编号为 1…N 的 N 个房间,每个房间关押一个犯人,有 M 种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生 ...

  5. 【转载】浅谈HTTPS以及Fiddler抓取HTTPS协议

    最近想尝试基于Fiddler的录制功能做一些接口的获取和处理工作,碰到的一个问题就是简单连接Fiddler只能抓取HTTP协议,关键的登录请求等HTTPS协议都没有捕捉到,所以想让Fiddler能够同 ...

  6. 24 结合webpack使用vue-router

    启用路由 参考官网:https://router.vuejs.org/zh/installation.html webpack就是一个模块化的工具 安装 cnpm i vue-router -S

  7. 能ping通Linux但是ssh连不上问题解决方法

    问题:能ping通Linux服务器 但是ssh连不上  <Linux redhat AS4 版本> 解决方法这个问题花了我20分钟去查资料,网上写的解决方法也是五花八门,不过,总算解决了, ...

  8. shell 学习笔记2

    shell的常用处理:https://github.com/dylanaraps/pure-bash-bible -d作为分隔符:read xargs -t作为分隔符:sort -F作为分隔符:awk ...

  9. Tomcat报错:Java.long.nullpointerException,详细是resp.getwriter.write报错

    报错原因: 空指针 在out.write(name);时,name不能为null,哪怕你随便给name赋值为xxoo啥的都可以,不要为null 改正:String name = "fail& ...

  10. 织梦cms导航高亮显示栏目及首页的方法

    直奔主题了,高亮显示教程适用于您具有一定的CSS基础才可以了,前提把高亮显示的样式写好,然后再开始高亮显示标签适用. <li {dede:field name=typeid runphp=&qu ...