<!--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. PAT基础级-钻石段位样卷2-7-7 危险品装箱 (25 分)

    集装箱运输货物时,我们必须特别小心,不能把不相容的货物装在一只箱子里.比如氧化剂绝对不能跟易燃液体同箱,否则很容易造成爆炸. 本题给定一张不相容物品的清单,需要你检查每一张集装箱货品清单,判断它们是否 ...

  2. 容器上使用Docker还是Rocket?为什么不一起用呢?

    在2014年接近尾声时,CoreOS在Docker发布了Rocket,声称Docker的流程模型有着“根本性的缺陷”.虽然CoreOS的创始人Alex Polvi尽量缓和语气,但是他坚持自己的基本观点 ...

  3. 常考JS题笔记

    ### 1. 原始类型有哪几种?null 是对象吗? 答: Null,undefined,Number,String,Blooean,symbol1)[理解和使用ES6中的Symbol][https: ...

  4. Tomcat 配置及优化

    Tomcat配置优化,主要在于优化tomcat运行模式,并发参数和线程数, 以及jvm堆内存和垃圾回收相关参数的优化.下面将逐一介绍. 1. tomcat的3种运行模式 1.1 BIO - 同步阻塞I ...

  5. Python十大经典排序算法

    现在很多的事情都可以用算法来解决,在编程上,算法有着很重要的地位,将算法用函数封装起来,使程序能更好的调用,不需要反复编写. Python十大经典算法: 一.插入排序 1.算法思想 从第二个元素开始和 ...

  6. VBA字典

    '字典并不存在于VBA中,需要调用 '调用方式1(前期绑定): '工具 --引用 - -浏览 - -找到scrrun.dll - 确定 '调用方式2 (后期绑定): ' Set d = CreateO ...

  7. docker(一) -- docker安装、容器加速、下载、备份

    一.docker的 容器是从镜像中创建出来的虚拟实例 容器用来运行实例,是读写层 镜像用来安装程序,是只读层 1. docker的安装和基本操作 安装命令 yum -y update yum inst ...

  8. [Luogu] 封锁阳光大学

    https://www.luogu.org/problemnew/show/P1330 #include <cstdio> #include <cstring> #includ ...

  9. CF809E 【Surprise me!】

    我们要求的柿子是张这样子的: \[\frac{1}{n * (n - 1)} * \sum_{i = 1}^n\sum_{j = 1}^{n}\phi(a_i*a_j)*dis(i, j)\] 其中\ ...

  10. tsar安装和使用

    Tsar简介 Tsar是淘宝自己开发的一个采集工具,主要用来收集服务器的系统信息(如cpu,io,mem,tcp等),以及应用数据(如squid haproxy nginx等). 收集到的数据存储在磁 ...