Angular2.js——数据显示
显示数据，即属性绑定机制把数据显示到用户界面上。
在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——数据显示的更多相关文章
- js数据显示在文本框中(页面加载显示和按钮触动显示)
web代码如下: <!DOCTYPE html> <html> <head> <title>jsTest02.html</title> &l ...
- Angular2.js——多个组件
目前我们的英雄列表和英雄详情位于同一个文件的同一个组件中,我们将来可能会受到新的需求,修改这个组件又不能影响另外一个.然而每一次更改都会给这两个组件带来风险和双倍的测试负担,没有任何好处.如果我们需要 ...
- Angular2.js——主从结构
学习这一篇的内容,还回到我们快速起步的应用上来. 主从结构,我们想要做一个英雄的列表,我们希望用户在列表中选中一个英雄,然后这个被选中的英雄出现在详情视图中.主视图是英雄列表,从视图则是被选中英雄的详 ...
- Angular2.js——表单（下）
这部分是接表单上部分的内容,主要内容有: 1.添加自定义的CSS来提供视觉反馈: 2.显示和隐藏有效性验证的错误信息: 3.使用ngSubmit处理表单提交: 4.禁用表单提交按钮. 添加自定义的CS ...
- Angular2.js——表单（上）
表单创建一个有效.引人注目的数据输入体验.Angular表单协调一组数据绑定控件,跟踪变更.验证输入的有效性,并且显示错误信息. 接下来,主要内容有: 1.使用组件和模板构建Angular表单: 2. ...
- angular2环境搭建
Angular2.x与Angular1.x完全不同,Angular2.x是不兼容Angular1.x的,所在在框架的构造上,它们是完全不同的.在Angular2.x中,因为其是基于ES6来开发的,所以 ...
- 如何在ASP.NET 5上搭建基于TypeScript的Angular2项目
一.前言 就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用 ...
- angular2与VS2015 asp.net core集成使用
首先,需要在VS2015环境下更新到update2,并安装asp.net core环境,并安装Node.js插件. 新建asp.net core项目: 此时,需要先新建npm配置文件,如图: 并定义n ...
- MVVM前后分离轻量级框架应用juicer和doT.js
前言 前后端开发分的越来越细化,为了方便前端工程师更好的调试后端工程师嵌套的代码,前后分离技术就出现了,简单理解其实就是Ajax异步将数据提供给JavaScript,由JavaScript进 ...
随机推荐
- js实现ajax的post请求步骤
post请求步骤与前篇的get请求步骤差别不大,只是增加了 xhr.setRequestHeader("Content-type","application/x-www- ...
- cassandra简单介绍与基本操作
项目中用到了cassandra,用来存储海量数据,且要有高效的查询:本博客就进行简单的介绍和进行一些基本的操作 一.使用场景: 是一款分布式的结构化数据存储方案(NoSql数据库),存储结构比Key- ...
- 在Pypi上发布自己的Python包
使用Python编程的都知道,Python的包安装非常的方便,一般都是可以pip来安装搞定: sudo pip install <package name> pip的安装请移步:https ...
- SQL Server从远程服务器导入数据
语法 insert inot user select * from opendatasource('sqloledb','server=192.168.0.1;uid=sa;pwd=dbpasswor ...
- 利用Register protocol实现网页调用桌面程序(类似迅雷、QQ等)
前言 我们经常看到 tencent://.. thunder:// 这两种开头的网址,往往觉得很奇怪,很想弄懂其中的原理,是如何实现的,我查找了相关的 资料,终于找到了,跟大家分享下. 原理篇 ...
- 使用CEF(CEFGLUE)作为您的客户端UI（一）
背景: 本人是一名C#开发者,而作为C#开发者,做客户端应用中最头痛的一件事就是没有一个好的UI解决方案.WinFrom嘛,效率虽然还不错,但是做一些特殊的效果,完全应付不来,比如透明控件.比FPS太 ...
- autoLayer：一基本布局
我不会写博客,写的不好请物见怪,这个autoLayer我就直接上图了: 本人环境:IDE(Xcode6)SDK(IOS8) 准备工作:找一个横图psd(由于我不会切图,我只会简单的描述一下图片处理), ...
- Docker建立本地Registry
从容器运行一个Registry # docker run -p : registry 查看yelinyuntest/static_web镜像 # docker images yelinyuntest/ ...
- 《Django By Example》第十一章 中文 翻译 （个人学习，渣翻）
第十一章 缓存内容 (译者 @ucag 注:这是倒数第二章,最后一个项目即将完成. @夜夜月 将会接过翻译的最后一棒.这本书的翻译即将完成.这也是我翻译的最后一章,作为英语专业的学生,我对于翻译有了更 ...
- Nginx网站使用CDN之后禁止用户真实IP访问的方法
做过面向公网WEB的运维人员经常会遇见恶意扫描.拉取.注入等图谋不轨的行为,对于直接对外的WEB服务器,我们可以直接通过 iptables .Nginx 的deny指令或是程序来ban掉这些恶意请求. ...