Angular2学习笔记(三) Angular2 数据显示
前几节是Angular2和TypeScript分开学的,以后准备边学Angular2遍学TypeScript,只有边学边用,才会更深刻的理解TypeScript,好,下面直奔主题 创建应用前面我们已经介绍了如何安装nodejs和angular-cli,下面我们默认都已经安装了angular-cli,首先来创建一个名为my-app的应用 ng new my-app 等待几分钟后会创建好应用,现在我们将对应用进行自定义的修改以下文件
<h1></h1> <h2>介绍: </h2> <h2>我的技能:</h2> 方法一展示 <ul> <!--这里采用TypeScript语法遍历skills--> <li *ngFor="let skill of skills1"> id:,名称: </li> </ul> 方法二展示 <ul class="show2"> <!--这里采用TypeScript语法遍历skills--> <li *ngFor="let skill of skills2"> id:,名称: </li> </ul> <p *ngIf="skills1.length >= 3">哇,好厉害哦,你有三种以上技能!</p> <p *ngIf="skills1.length < 3">您不到三种技能,加油哦!</p> 上面的和,title和introduction为组件的变量,其实就是输出变量,当然是动态的了(当变量变化自动更新页面),ngFor=”let skill of skills1”代表循环变量skills1,ngIf=”skills1.length >= 3”同理是判断语句
export class Skill { id: number; name: string; constructor(id: number,name: string) { this.id = id; this.name = name; } } 这里出现了export关键词,只有export了,其他地方才可以import,constructor是构造方法,其实两个参数.
import { Component } from '@angular/core'; import { Skill } from './skill'; @Component({ selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) // export为导出类(如果想外部引用必须要求可导出,否则外部不可以导入),typescript语法 export class AppComponent { title = 'Angular2笔记'; introduction = '我是一个Angular2新手'; skills1: Skill[] = [ {id: 1,name: 'JAVA'},{id: 2,name: 'PHP'},{id: 3,name: 'Python'},{id: 4,name: 'JavaScript'},{id: 5,name: 'Others'}]; // 必须要求有对应的构造方法 skills2 = [ new Skill(1,'JAVA'),new Skill(2,'PHP'),new Skill(3,'Python'),new Skill(4,'JavaScript'),new Skill(5,'Others'),]; } 上面我们初始化了四个变量,其中title和introduction为字符串类型,skills1和skills2为数组类型,skills1: Skill[]可以加类型也可以不加类型,不加类型代表松散类型对象,skills2同样也可以规定类型.new Skill代表创建对象并给定参数,上面已经给出具体构造方法.
h1 {color: red} h2 {font-size: large;} .show2 { list-style-type: none ; } .show2 li { color: green; }
我们在命令行执行ng s 就可以运行项目项目运行时会出现Loading…英文字母,因为angular2渲染需要时间,所以会闪动,我们可以将其修改成自己喜欢的一些动画之类的来提高体验效果,其在index.html文件中 注意我们要使用import的时候一定要export一下,否则无法使用 查看源代码 演示地址
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |