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. CFdiv2 165E. Compatible Numbers 子集枚举

    传送门 题意: 给出一个序列,输出每个数x对应的一个ans,要求ans在数列中,并且ans & x  = 0:数列的每个数小于(4e6) 思路: 这道题的方向比较难想.想到了就比较轻松了,可以 ...

  2. unicode编码原理及问题

    历史在1963年,计算机的使用尚不广泛,那时使用的是7-bit的ASCII码,范围为0-127作为字符的编码,只支持少部分的字符,但是随着计算机的普及,不同的国家地区开始自己制造自己的编码规范,这导致 ...

  3. GA,RC,Alpha,Beta,Final等软件版本名词释义

    对应上图的表格如下: 名词 说明 Alpha α是希腊字母的第一个,表示最早的版本,内部测试版,一般不向外部发布,bug会比较多,功能也不全,一般只有测试人员使用. Beta β是希腊字母的第二个,公 ...

  4. 005 Python开发环境配置

    目录 一.概述 二.Python语言概述 2.1 Python语言的诞生 2.2 Monty Python组合 三.Python语言系统开发环境配置 四.Python程序编写与运行 4.1 Pytho ...

  5. 使用Nginx实现负载均衡(tomcat集群之后实现交叉访问)

    tomcat集群(多一台服务器),使用nginx实现负载均衡(upstream sina中配置即可):使用上次博客中的sina案例 1.首先再加一个tomcat服务: 2.修改server.xml配置 ...

  6. 纯css实现乌云密布的天气图标

    效果 效果如下 ​ 实现思路 使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案 after伪元素写乌云下的投影 增加动画 dom结构 用两个嵌套的div容器,父容器来 ...

  7. Java 内省(Introspector)和 BeanUtils

    人生若只如初见,何事秋风悲画扇. 概述 内省(Introspector) 是Java 语言对 JavaBean 类属性.事件的一种缺省处理方法. JavaBean是一种特殊的类,主要用于传递数据信息, ...

  8. sql server 2014 的安装

    1.双击打开sql_server2014的安装包 2.点击弹出来的对话框的确定按钮 3.等待一会,安装包在准备中 4.弹出SQL server 安装中心,点击全新 SQL Server 独立安装 5. ...

  9. Codeforces Round #585 (Div. 2)

    https://www.cnblogs.com/31415926535x/p/11553164.html 感觉很硬核啊这场,,越往后越做不动,,,emmmm,,,(这场是奔着最后一题 2sat 来的, ...

  10. ckeditor中 config.js等通过ckeditor.js引入文件手动修改方法

    因为除了ckeditor.js之外的引用文件是通过ckeditor.js自动添加<script>或<link>标签实现文件的引入,引入的根目录是展示页面的地址.有时需要手动修改 ...