显示数据，即属性绑定机制把数据显示到用户界面上。

在Angular中最典型的数据显示方式，就是把HTML模板中的控件绑定到Angular组件的属性。

接下来介绍几种数据显示的语法和代码片段。

使用插值表达式显示组件属性

要显示组件的属性，最简单的方式就是通过插值表达式来绑定属性名。要使用插值表达式，就把属性名包裹在双花括号里放进视图模板。

app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

template: `   //模板

    <h1>My second Angular App is {{name}}</h1>   //双花括号包裹属性名

    <h1>{{title}}</h1>

    `

    /*templateUrl:"/app/template.html"*/

})

export class AppComponent1 {

    //直接赋值

    name='Angular';

    title='Tour of Heros';

    hero='Windstorm';

先把title  name  hero三个属性添加到空白的组件中，之后修改模板，使用花括号形式的插值表达式来显示这两个模板属性。

模板是包在ECMAScript2015反引号中的一个多行字符串。

Angular自动从组件中提取属性的值，并把这些值插入到浏览器中。当这些属性发生变化时，Angular会自动刷新显示。

@Component装饰器中指定的CSS选择器selector，它指定了一个叫my-app的元素。该元素是index.html的body里的占位符。

当我们通过main.ts中的AppComponent类启动时，Anjular在index.html中查找一个<my-app>的元素，然后实例化一个AppComponent，并将其渲染到<my-app>标签中。

使用构造函数来声明和初始化属性

app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

template: `

    <h1>My second Angular App</h1>

    <h1>{{title}}</h1>

    `

})

export class AppComponent1 {

    //使用构造函数

    title:string;

    hero:string;

    constructor(){

        this.title='Tour of Heros2';

        this.hero='Windstorm2';

    }

}

使用ngFor显示数组属性

app.component.ts

import { Component } from '@angular/core';

import {Heroo} from "./hero";

@Component({

selector: 'my-app',

template: `

    <h1>My second Angular App</h1>

    <h1>{{title}}</h1>

    <p>英雄如下：</p>

    <ul>

        <li *ngFor="let city of cities">

            {{city}}

        </li>

    </ul>

    `

    /*templateUrl:"/app/template.html"*/

})

export class AppComponent1 {

    //使用ngFor显示数组属性

    title='Tour of Heros';

    cities=['W','B','M','T'];

    mycity=this.cities[0];

}

这个界面使用了<ul>和<li>标签组成的无序列表。<li>元素里的*ngFor是Angular的迭代指令。他将<li>元素及其子标签标记为迭代模板。

*ngFor表达式中city是一个模板输入变量。Angular为列表中的每一个条目复制一个<li>元素，在每个迭代中，把city变量设置为当前条目。Angular把city变量作为花括号插值表达式的上下文。

效果如下：

为数据创建一个类

在app目录下创建一个hero.ts的新文件

hero.ts

export class Heroo{

    constructor(

        public id:number,//声明了一个构造函数参数及其类型；

                        // 声明了一个同名的公共属性

                        //当我们new出该类的一个实例时，把该属性初始化为相应的参数值？

        public name:string

    ){}

}

定义了一个类，有两个属性 id和name。

使用这个类Heroo

首先导入这个类，组件的heros属性就可以返回一个类型化的数组了。更新模板，显示英雄的name属性即可。

app.component.ts

import { Component } from '@angular/core';

import {Heroo} from "./hero"; //导入Heroo类

@Component({

selector: 'my-app',

template: `

    <h1>My second Angular App</h1>

    <h1>{{title}}</h1>

    <h2>我最喜欢的英雄是{{myhero.name}}</h2>  //显示name属性

    <p>英雄如下：</p>

    <ul>

        <li *ngFor="let hero of heros">

            {{hero.name}}   //显示name属性

        </li>

    </ul>

    `

})

export class AppComponent1 {

    heros=[

        new Heroo(1,'w'),

        new Heroo(2,'b'),

        new Heroo(3,'m'),

        new Heroo(4,'T')

    ]

    myhero=this.heros[0];

}

使用*ngIf进行条件显示

在模板的<ul>标签下面可以添加一个<p>标签

template: `

    <h1>My second Angular App</h1>

    <h1>{{title}}</h1>

    <h2>我最喜欢的英雄是{{myhero.name}}</h2>

    <p>英雄如下：</p>

    <ul>

        <li *ngFor="let hero of heros">

            {{hero.name}}

        </li>

    </ul>

    <p *ngIf="heros.length>3">这里英雄的个数超过三个</p>

    `

<p>标签中的表达式意思为如果heros数组的长度大于3，<p>标签就会显示  这里的英雄的个数超过三个。如果不超过三个，该消息就会消失。

 题外话，上述的模板文件是内联的，使用template属性定义成内联得了。除此之外，我们可以把模板文件定义成一个独立的HTML文件中，再通过@Component装饰器的templateUrl属性，在组件元数据中把它链接到组件。

我们可以在app目录下新建一个template.html文件，内容如下

template.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h1>My second Angular App</h1>

<h1>{{title}}</h1>

<h2>我最喜欢的英雄是{{myhero.name}}</h2>

<p>英雄如下：</p>

<ul>

    <li *ngFor="let hero of heros">

        {{hero.name}}

    </li>

</ul>

<p *ngIf="heros.length>3">这里英雄的个数超过三个</p>

</body>

</html>

之后修改app.component.ts文件

import { Component } from '@angular/core';

import {Heroo} from "./hero"; //导入Heroo类

@Component({

selector: 'my-app',

templateUrl:"/app/template.html"   //相对路径

})

export class AppComponent1 {

    heros=[

        new Heroo(1,'w'),

        new Heroo(2,'b'),

        new Heroo(3,'m'),

        new Heroo(4,'T')

    ]

    myhero=this.heros[0];

}

写的比较简单，希望可以明白。

参考 https://angular.cn/docs/ts/latest/guide/displaying-data.html

Angular2.js——数据显示的更多相关文章

  1. js数据显示在文本框中(页面加载显示和按钮触动显示)

    web代码如下: <!DOCTYPE html> <html> <head> <title>jsTest02.html</title> &l ...

  2. Angular2.js——多个组件

    目前我们的英雄列表和英雄详情位于同一个文件的同一个组件中,我们将来可能会受到新的需求,修改这个组件又不能影响另外一个.然而每一次更改都会给这两个组件带来风险和双倍的测试负担,没有任何好处.如果我们需要 ...

  3. Angular2.js——主从结构

    学习这一篇的内容,还回到我们快速起步的应用上来. 主从结构,我们想要做一个英雄的列表,我们希望用户在列表中选中一个英雄,然后这个被选中的英雄出现在详情视图中.主视图是英雄列表,从视图则是被选中英雄的详 ...

  4. Angular2.js——表单（下）

    这部分是接表单上部分的内容,主要内容有: 1.添加自定义的CSS来提供视觉反馈: 2.显示和隐藏有效性验证的错误信息: 3.使用ngSubmit处理表单提交: 4.禁用表单提交按钮. 添加自定义的CS ...

  5. Angular2.js——表单（上）

    表单创建一个有效.引人注目的数据输入体验.Angular表单协调一组数据绑定控件,跟踪变更.验证输入的有效性,并且显示错误信息. 接下来,主要内容有: 1.使用组件和模板构建Angular表单: 2. ...

  6. angular2环境搭建

    Angular2.x与Angular1.x完全不同,Angular2.x是不兼容Angular1.x的,所在在框架的构造上,它们是完全不同的.在Angular2.x中,因为其是基于ES6来开发的,所以 ...

  7. 如何在ASP.NET 5上搭建基于TypeScript的Angular2项目

    一.前言 就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用 ...

  8. angular2与VS2015 asp.net core集成使用

    首先,需要在VS2015环境下更新到update2,并安装asp.net core环境,并安装Node.js插件. 新建asp.net core项目: 此时,需要先新建npm配置文件,如图: 并定义n ...

  9. MVVM前后分离轻量级框架应用juicer和doT.js

    前言      前后端开发分的越来越细化,为了方便前端工程师更好的调试后端工程师嵌套的代码,前后分离技术就出现了,简单理解其实就是Ajax异步将数据提供给JavaScript,由JavaScript进 ...

随机推荐

  1. Oracle-orclEXORIM

    imp pzhdb/hiway@orcl file =d:\pzhsd.dmp fromuser = pzhsd touser=pzhdb:导入 第一个pzhdb为新的用户名 hiway为密码 orc ...

  2. 腾讯.NET面试题

    在整个面试过程中,作为面试者的你,角色就是小怪兽,面试官的角色则是奥特曼,更不幸的是,作为小怪兽的你是孤身一人,而奥特曼却往往有好几个~ 以下是网友发的关于腾讯的.NET面试题,不得不说还是有一定的难 ...

  3. 解决ecshop进入后台服务器出现500的问题

    ecshop安装完成以后,前台页面打开正常,但是后台页面大家会出现500错误,看了很多的论坛和网站,删除过top.htm里面的JS代码的,.htaccess文件的修改的,都没有解决,后来找到原因, 原 ...

  4. JsonCpp(C++程序使用)

    C++ json解析库 github C++: Makefile目录cmd:make 得到build 得到.a静态库 Eclipse引入头文件  (include目录) 引入.a静态库 编译设置: O ...

  5. (16)IO流之输入字节流FileInputStream和输出字节流FielOutputStream

    IO流技术解决的问题:设备与设备之间的传输问题,内存-->硬盘,硬盘-->内存,等等 IO流技术 如果按照数据的流向划分可以划分为:输入流和输出流 输入输出的标准是以程序为参考物的,如果流 ...

  6. WP8.1小梦词典开发2:百度翻译API使用

    原文出自:http://www.bcmeng.com/api2/ 小梦昨天和大家分享了WP8.1金山词霸API使用方法,今天继续分享windows phone 8.1中百度翻译API的使用方法.和昨天 ...

  7. windows phone 8.1开发:文件选择器FileSavePicker

    上一篇文章小梦分享了文件选择器FileOpenPicker的用法,这篇文章我们继续分享FileSavePicker的用法,FileSavePicker的用法几乎和FileOpenPicker用法一模一 ...

  8. centos6.7编译安装mysql5.7.17

    centos6.7编译安装mysql5.7.17 2017-03-24 09:57:15 提示:mysql5.7.17和之前5.56以前的版本安装不一样,需要用cmake 另外,看本文档的mysql编 ...

  9. Android 5.0(棒棒糖))十大新特性

    Android 5.0(棒棒糖))十大新特性 1. 全新Material Design设计风格 Android Lollipop全新的设计语言是受到了多种因素影响,是一种大胆的平面化创新.换句话说,谷 ...

  10. CoreCLR源码探索(四) GC内存收集器的内部实现 分析篇

    在这篇中我将讲述GC Collector内部的实现, 这是CoreCLR中除了JIT以外最复杂部分,下面一些概念目前尚未有公开的文档和书籍讲到. 为了分析这部分我花了一个多月的时间,期间也多次向Cor ...