<!--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. Linux命令——lsb_release

    简介 LSB是Linux Standard Base(Linux标准库)的缩写, lsb_release命令 用来与具体Linux发行版相关的Linux标准库信息. 注:LSB的译法有Linux标准库 ...

  2. jmap与jstat工具实战分析

    在上一节[https://www.cnblogs.com/webor2006/p/10662363.html]最后其实是抛出了infoq关于元空间介绍的文章中所涉及到JDK自带的一些工具的使用,这次咱 ...

  3. AfxBeginThread深入解析

    看过<深入浅出MFC>书中,j.j.hou提到在创建新的线程时,最好不要直接使用CreateThread,虽然AfxBeginThread也是对CreateThread的封装,但是AfxB ...

  4. Windows10-Neo4j安装问题及解决方案

    暑假都过得差不多了才终于开始搭环境了 1.下载Neo4j Neo4j官网下载翻墙的话还可以 不翻墙的话下了好几次都下不下来 不用下载desktop,下载community server就可以了 2.下 ...

  5. python - django (查询、聚合、分组)

    # """ ---- 正向查询按字段,反向查询按表名 一: 一对多 正向查询:(字段对象.关联表.查询字段) x_obj = models.Book.objects.fi ...

  6. HDU 6168 - Numbers | 2017 ZJUT Multi-University Training 9

    /* HDU 6168 - Numbers [ 思维 ] | 2017 ZJUT Multi-University Training 9 题意: .... 分析: 全放入multiset 从小到大,慢 ...

  7. PostgreSQL 学习手册-模式Schema

    一个数据库包含一个或多个命名的模式,模式又包含表.模式还包含其它命名的对象,包括数据类型.函数,以及操作符.同一个对象名可以在不同的模式里使用而不会导致冲突: 比如,schema1和myschema都 ...

  8. 十三.基础邮件服务、parted分区工具、交换分区、链路聚合

    1.基础邮件服务 DNS服务器:虚拟机classroom   以server0.example.com 为例  yg@server0.example.com    xln@server0.exampl ...

  9. 51nod 1459 & 1212

    1459 双限制最短路 #include <stdio.h> #include <iostream> #include <vector> #include < ...

  10. (转)实验文档5:企业级kubernetes容器云自动化运维平台

    部署对象式存储minio 运维主机HDSS7-200.host.com上: 准备docker镜像 镜像下载地址 复制 12345678910111213141516 [root@hdss7-200 ~ ...