tip:数据的定义需要在对应ts中进行,调用在html中

  定义数组:

  ts中 public arr =["111","222","333"];

  html中

  <li *ngFor="let item of  arr">{{item}}</li>


指定数据类型

  ts中

  1. public list:any[]=["我是1号",“我是2号”,“我是3号”];
  2. public items:Array<any>=["我是1号",“我是2号”,“我是3号”];

  这两种方式可以任选其一都可以

  html中

    <li *ngFor = let item of list>{{item}}</li>  


定义数组(数组中存放对象)

  ts中:

  public userList:any=[

  {username:"rock",age:20},

  {username:"roy",age:"23"},

  {username:"luck",age:"214"}

]

html中

  <li *ngFor="let item of userList">

    <p>{{item.username}}</p><p>{{item.age}}</p>

  </li>


多重循环嵌套

在ts中  

public cars:any[]=[
      {cate:"宝马",
    list:[
      {name:"宝马X1",price:"20w"},
      {name:"宝马X2",price:"30w"},
      {name:"宝马X3",price:"40w"}
     ]
     },
         {
   cate:"奥迪",
   list:[
     {name:"奥迪Q1",price:"40w"},
     {name:"奥迪Q2",price:"50w"},
     {name:"奥迪Q3",price:"60w"}
    ]
  }
]

在HTML中

<div>
  <ul>
    <li *ngFor="let item of cars">
      <p>{{item.cate}}</p>
      <span *ngFor="let item of item.list">{{item.name}}--{{item.price}}</span>
    </li>
   </ul>
</div>

Ng的数组绑定的更多相关文章

  1. mvc数组绑定-jquery ajax

    var list=[];//数组 list[0]=1001; list[1]=1002; list[1]=1003; var json_data = { selected: list}; $.ajax ...

  2. EmberJs之数组绑定@each&[]

    写在前面 好长时间没有写博客了,昨天花了些时间又整理了下之前发布过的<Ember.js之computed Property>文章,并创建了一个测试代码库,花了些时间,希望能使用测试代码的方 ...

  3. asp.net mvc int[] 和 string[] 自定义数组绑定

    新建类,int[]数组模型绑定 using System; using System.Collections.Generic; using System.Linq; using System.Web; ...

  4. 给js创建的一个input数组绑定click事件

    <html> <body> <input type="button" name="input[]" value="按钮1 ...

  5. 使用C# .NET 将结构数组绑定到 Windows 窗体的方法

      本任务的内容 概要 要求 设计结构 向数组添加结构实例 将结构成员绑定到窗体控件 提供浏览数组的方式 分步示例 参考 概要 本文介绍如何向 Windows 窗体绑定结构数组. 该示例由一个 Win ...

  6. Spring MVC数组绑定

    需求:商品批量删除,用户在页面选择多个商品,批量删除. 关键:将页面选择(多选)的商品id,传到controller方法的形参,方法形参使用数组接收页面请求的多个商品id // 批量删除 商品信息 @ ...

  7. Repeater绑定数组并显示其值

    web开发中,尤其是对于数据展示,不得不说Repeater是一个万能的控件,而且使用也很方便. 在ASP.NET中将数组绑定到Repeater中请问如何在Repeater前台页面中显示该数组的值? s ...

  8. ASP.NET MVC数组模型绑定

    在ASP.NET MVC中使用Razor语法可以在视图中方便地展示数组,如果要进行数组模型绑定,会遇到索引断裂问题,如下示例: <input type="text" name ...

  9. MVC数组模型绑定

    ASP.NET MVC数组模型绑定   在ASP.NET MVC中使用Razor语法可以在视图中方便地展示数组,如果要进行数组模型绑定,会遇到索引断裂问题,如下示例: <input type=& ...

随机推荐

  1. Numpy的进阶学习

    前言: 在学习cs231n编写课后作业代码过程中 .发现自己对计算的向量化vectorized不是很懂,编写不出代码.对numpy的库也只是停留在表面 Numpy Numpy学习库链接 1.numpy ...

  2. jdk13快来了,jdk8的这几点应该看看!

    说明 jdk8虽然出现很久了,但是可能我们还是有很多人并不太熟悉,本文主要就是介绍说明一些jdk8相关的内容. 主要会讲解: lambda表达式 方法引用 默认方法 Stream 用Optional取 ...

  3. 牛客练习赛39 D 动态连通块+并查集 X bitset 优化

    https://ac.nowcoder.com/acm/contest/368/D 题意 小T有n个点,每个点可能是黑色的,可能是白色的.小T对这张图的定义了白连通块和黑连通块:白连通块:图中一个点集 ...

  4. 牛客网暑期ACM多校训练营(第二场) 题解 A run 递推 dp

    链接:https://www.nowcoder.com/acm/contest/140/A来源:牛客网 White Cloud is exercising in the playground. Whi ...

  5. HDFS 读写流程-译

    HDFS 文件读取流程 Client 端调用 DistributedFileSystem 对象的 open() 方法. 由 DistributedFileSystem 通过 RPC 向 NameNod ...

  6. == != === equals() 区别

    java中的数据类型,可分为两类: 1.基本数据类型,也称原始数据类型. byte,short,char,int,long,float,double,boolean,他们之间的比较,应用双等号(==) ...

  7. Web框架之Gin

    Gin是一个用Go语言编写的web框架.它是一个类似于martini但拥有更好性能的API框架, 由于使用了httprouter,速度提高了近40倍. 如果你是性能和高效的追求者, 你会爱上Gin. ...

  8. lambda表达式不同对象根据对象某个属性去重

    1.有时候有两个list对象,我们想要去重,比如: List<User> userList和List<Person>personList 想通过User的id和Person的i ...

  9. PB级数据实现秒级查询ES的安装

    什么是ES?ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java语言开发的, ...

  10. Kubernetes监控实践

    一.Kubernetes介绍 Kubernetes(K8s)是一个开源平台,能够有效简化应用管理.应用部署和应用扩展环节的手动操作流程,让用户更加灵活地部署管理云端应用. 作为可扩展的容错平台,K8s ...