<!--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. Django中使用JWT

    JWT """ 1.组成: header.payload.signature 头.载荷.签名 2.距离: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1 ...

  2. 利其器:无法在 ".vscode" 文件夹()内创建 "launch.json" 文件。

    无法在 ".vscode" 文件夹()内创建 "launch.json" 文件. https://www.cnblogs.com/lidabo/p/588899 ...

  3. P1168 中位数[堆 优先队列]

    题目描述 给出一个长度为NNN的非负整数序列AiA_iAi​,对于所有1≤k≤(N+1)/21 ≤ k ≤ (N + 1) / 21≤k≤(N+1)/2,输出A1,A3,…,A2k−1A_1, A_3 ...

  4. IntelliJ IDEA如何默认使用阿里云的Maven仓库

    点击IntelliJ IDEA的config中的setting选项 在<mirrors>节点中加上一个子节点,然后保存即可: <mirror> <id>alimav ...

  5. Docker那些事儿之编排工具docker-compose

    前面已经讲解过docker的一些基础使用,镜像创建的操作过程,如果大量容器需要同时部署,一个一个容器进行服务器上的部署,估计要疯掉,在使用上我们需要找到更好更便捷的使用方式,今天要讲解的容器编排工具d ...

  6. Unity Platform Differernces

    https://docs.unity3d.com/560/Documentation/Manual/SL-PlatformDifferences.html

  7. 洛谷P2221 高速公路【线段树】

    题目:https://www.luogu.org/problemnew/show/P2221 题意:有n个节点排成一条链,相邻节点之间有一条路. C u v val表示从u到v的路径上的每条边权值都加 ...

  8. mac XXX 已损坏,打不开。 您应该将它移到废纸篓。

    mac 上的软件我改了某些配置,打开提示这个. 是因为安全认证问题. 在系统偏好设置里面,安全与隐私设置为允许任何来源就可以. 如果新版系统没有这个选项,那么在命令行输入:sudo spctl --m ...

  9. Kylin介绍 (很有用)

    转:http://blog.csdn.net/yu616568/article/details/48103415 Kylin是ebay开发的一套OLAP系统,与Mondrian不同的是,它是一个MOL ...

  10. 微信公众号开发--微信JS-SDK分享到朋友圈和分享给朋友

    之前写过一篇使用微信JS-SDK来实现扫一扫功能的博客 微信公众号开发–微信JS-SDK扫一扫功能 在该博客里介绍了微信JS-SDK的基本用法,其中包括以下几个步骤 还详细介绍了通过config接口注 ...